body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background-color: #f0f2f5; color: #1c1e21; }

        /* Guided tour (shared/tour.js) - deliberately styled in a purple
           palette distinct from the app's own green/orange theme, so it
           reads as an overlay rather than part of the app UI. */
        .tour-highlight {
          z-index: 2001;
          box-shadow: 0 0 0 9999px rgba(76,29,149,0.55), 0 0 0 4px #a855f7;
          border-radius: 8px;
        }
        .tour-tooltip {
          position: fixed;
          z-index: 2002;
          background: rgba(255, 255, 255, 0.88);
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);
          border: 1px solid rgba(124, 58, 237, 0.3);
          border-radius: 10px;
          padding: 18px;
          width: 300px;
          max-width: calc(100vw - 32px);
          box-shadow: 0 6px 24px rgba(76,29,149,0.35);
        }
        .help-menu {
          position: fixed; z-index: 2003; min-width: 190px;
          background: #fff; border-radius: 8px; padding: 4px 0;
          box-shadow: 0 6px 24px rgba(0,0,0,0.25);
        }
        .help-menu button, .help-menu a {
          display: block; width: 100%; box-sizing: border-box; margin: 0;
          padding: 10px 14px; text-align: left; font-size: 0.95rem;
          background: none; border: none; border-radius: 0;
          color: #1c1e21; text-decoration: none; cursor: pointer;
        }
        .help-menu button:hover, .help-menu a:hover { background: #f0f2f5; }
        .help-menu i { width: 1.3em; color: #7c3aed; }
        .tour-tooltip h3 { margin: 4px 0 8px 0; color: #4c1d95; }
        .tour-tooltip p { margin: 0 0 14px 0; font-size: 0.92rem; line-height: 1.4; }
        .tour-step-count { font-size: 0.78rem; color: #7c3aed; margin-bottom: 4px; font-weight: 600; }
        .tour-tooltip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
        /* Neutralize the global mobile rule (.button { width: 100% }, see the
           max-width:768px block below) so the three tour buttons share one
           row instead of each claiming full width - same technique already
           used by .modal-buttons in dyeshelf.html. */
        .tour-tooltip-actions button {
          margin: 0; white-space: nowrap; flex: 1 1 auto; width: auto; min-width: 0;
          background-color: #7c3aed; color: #fff; border: none;
        }
        .tour-tooltip-actions button:hover { background-color: #6d28d9; }
        .tour-tooltip-actions button#tour-skip-btn,
        .tour-tooltip-actions button#tour-back-btn {
          background-color: transparent; color: #7c3aed; border: 1px solid #7c3aed;
        }
        .tour-tooltip-actions button#tour-skip-btn:hover,
        .tour-tooltip-actions button#tour-back-btn:hover { background-color: rgba(124, 58, 237, 0.1); }

        /* Small round "+" buttons next to section headings (Mina Väskor /
           Mina Banor) that open a creation modal - green to match the app's
           existing "Starta runda" call-to-action pattern. */
        .fab-add-btn {
          background-color: #34a853;
          color: #fff;
          border: none;
          border-radius: 50%;
          width: 27px;
          height: 27px;
          min-width: 27px;
          font-size: 0.9rem;
          line-height: 1;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          flex-shrink: 0;
          padding: 0;
          margin: 0;
        }
        .fab-add-btn:hover { background-color: #2c8c46; }

        /* Button row inside the "+" creation modals (createBagModal /
           createCourseModal) - same width:100% neutralization technique as
           .tour-tooltip-actions above, so Skapa/Avbryt share one row on mobile
           instead of each claiming the global .button { width: 100% }. */
        .modal-buttons-row { display: flex; gap: 10px; margin-top: 20px; }
        .modal-buttons-row button { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
        .container { max-width: 1200px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        h1, h2, h3 { color: #054a17; }
        .button { background-color: #054a17; color: white; padding: 10px 15px; border: none; border-radius: 999px; cursor: pointer; font-size: 16px; margin: 5px 0; text-decoration: none; display: inline-block; }
        
		.button-secondary {
		  background-color: #ffb347;   /* mjuk brandgul/orange */
		  color: #3a2a00;              /* mörk text för kontrast */
		  padding: 8px 14px;
		  border-radius: 999px;        /* rundade piller */
		  border: 1px solid #e6972e;
		  cursor: pointer;
		  font-size: 0.95rem;
		}

		/* Destruktiva åtgärder (t.ex. "Radera mitt konto") - samma röda ton som
		   admin.html:s lokala .delete-btn, men delad här så fler sidor kan
		   återanvända den istället för att duplicera definitionen. */
		.button-danger {
		  background-color: #d9534f;
		  color: white;
		  padding: 10px 15px;
		  border: none;
		  border-radius: 999px;
		  cursor: pointer;
		  font-size: 16px;
		}
		.button-danger:disabled {
		  background-color: #e8a5a3;
		  cursor: not-allowed;
		}

		/* Versionsväljare i "Ny layout"-griden (shared/course-layouts.js) */
		.version-choice-btn.selected {
		  background-color: #054a17;
		  color: #fff;
		  border-color: #054a17;
		}
		
		/* Hover-effekt */
		.button-secondary:hover {
		  background-color: #ff9800;
		  border-color: #e68700;
		}

		/* Grå variant för mindre, sällan använda åtgärder (t.ex. "Rensa discplanering") */
		.button-muted {
		  background-color: #e0e0e0;
		  color: #444;
		  padding: 8px 14px;
		  border-radius: 999px;
		  border: 1px solid #c7c7c7;
		  cursor: pointer;
		  font-size: 0.95rem;
		}
		.button-muted:hover {
		  background-color: #d0d0d0;
		  border-color: #b0b0b0;
		}
		
		/* Sharing badges */
		.sharing-badge {
		  padding: 4px 10px;
		  border-radius: 999px;
		  font-size: 0.8em;
		  margin-left: 10px;
		  display: inline-block;
		}
		
		.sharing-badge.readonly {
		  background: #054a17;
		  color: white;
		}
		
		.sharing-badge.collaboration {
		  background: #ffb347;
		  color: #3a2a00;
		}
		
		#logoutBtn {
		  white-space: nowrap;      /* håll texten på EN rad */
		  padding: 6px 18px;        /* ev. lite bredare */
		  min-width: 110px;         /* tvinga plats så finskan ryms */
		}
		
		html {
		/* Reservera plats för vertikal scrollbar även när allt får plats i höjdled */
		overflow-y: scroll;
		}
		
        .icon-button { background: none; border: none; cursor: pointer; padding: 5px; line-height: 0; }
        .icon-button:disabled { opacity: 0.35; cursor: not-allowed; }
        .icon-button svg { width: 26px; height: 26px; fill: #555555; }
        .icon-button:hover svg { fill: #333333; }
        input[type="text"], input[type="number"], select, textarea { width: 100%; padding: 10px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
        select:focus { outline: none; border-color: #f5a623; background-color: #fffbf0; }
        select:hover { border-color: #f5a623; }
        
        /* Improved styling for course holes select */
        #newCourseHoles {
            background-color: #fff8e7;
            color: #3a2a00;
            border: 2px solid #e6972e;
            border-radius: 8px;
            padding: 10px 15px;
            font-size: 1em;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e6972e'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 20px;
            padding-right: 40px;
        }
        
        #newCourseHoles:focus {
            outline: none;
            border-color: #d4a5ff;
            box-shadow: 0 0 0 3px rgba(212, 165, 255, 0.3);
        }
        
        #newCourseHoles:hover {
            border-color: #d4a5ff;
        }
        
        /* For Firefox - style the dropdown */
        #newCourseHoles option {
            background-color: #fff8e7;
            color: #3a2a00;
            padding: 10px;
        }
        
        .item-list { list-style-type: none; padding: 0; }
        .item-list li { background-color: #f7f7f7; padding: 12px; margin-bottom: 6px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
        /* Archived-ness shown by muting the row instead of a box-icon prefix
           (the icon's position used to shift with translated text length). */
        .item-list li.archived-course-item { background-color: #ececec; opacity: 0.65; }
        .item-list li.archived-course-item:hover { opacity: 0.85; }
        .main-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        .full-view { display: none; }
        /* Keeps the "Tillbaka"/"Visa Presentation" nav visible while scrolling
           through a long hole list in banplanering, instead of only at the very
           top - a sticky bar works at any scroll position, not just one fixed
           spot in the list. Presentation mode hides these buttons entirely
           (see courses.js), so this never applies there. */
        #course-plan-sticky-nav {
            position: sticky;
            top: 0;
            z-index: 5;
            background-color: #fff;
            padding: 8px 0;
            margin-bottom: 4px;
            border-bottom: 1px solid #eee;
        }
        .disc-actions { margin-left: auto; display: flex; align-items: center; gap: 10px;}
		
        /* Modal-stilar */
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
        .modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 700px; border-radius: 8px; position: relative; }
        .close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
		
        /* Flikar */
        .tabs { border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px; }
        .tab-button { background-color: #eee; border: 1px solid #ccc; padding: 10px 15px; cursor: pointer; }
        .tab-button.active { background-color: #fff; border-bottom-color: #fff; }
        #masterDiscList, #disc-selection-list { max-height: 400px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-top: 10px; }
        #masterDiscList li { 
			cursor: pointer; 
			display: flex; 
			justify-content: space-between; 
			align-items: center; 
		}
        #disc-selection-list li { 
			cursor: pointer; 
			display: flex; 
			/* justify-content: space-between; BORTTAGEN FÖR KOMPAKT VY */
			align-items: center; 
		}
		#masterDiscList li:hover, #disc-selection-list li:hover { background-color: #e4e6eb; }
		
		/* PB- och Mål-block */
		#edit-course-pers-label,
		#edit-course-date-label {
		  color: #0b6b24;
		  font-weight: 600;
		}
		#edit-course-pers,
		#edit-course-date {
		  background: #f4f9f5;
		  border: 1px solid #b6d9c4;
		}
		#edit-course-pers:focus,
		#edit-course-date:focus {
		  border-color: #0b6b24;
		  box-shadow: 0 0 0 2px rgba(11,107,36,0.15);
		}

		/* Mål-block */
		#edit-course-goal-label,
		#edit-course-goal-date-label {
		  color: #e08a1f;
		  font-weight: 600;
		}
		#edit-course-goal,
		#edit-course-goal-date {
		  background: #fff8ec;
		  border: 1px solid #f6d8a8;
		}
		#edit-course-goal:focus,
		#edit-course-goal-date:focus {
		  border-color: #e08a1f;
		  box-shadow: 0 0 0 2px rgba(224,138,31,0.18);
		}
        /* Hål-planering */
        .hole-item-row { display: flex; align-items: center; }
        .hole-item-row label { margin-right: 8px; font-weight: 600; }
        .selected-disc-info:hover { background-color: #dcdcdc; }
        .radio-group input { margin-right: 5px; }
        .radio-group label { margin-right: 15px; font-weight: normal; }

        /* Stora Flight Chart-modalen */
        #flightChartModal .modal-content { max-width: 90vw; width: auto; display: inline-block; }
        .chart-wrapper { display: flex; flex-direction: column; }
        .chart-container { display: flex; }
        .y-axis { display: flex; flex-direction: column; text-align: right; padding-right: 10px; font-weight: bold; color: #555; justify-content: space-between; }
        .chart-grid { width: 800px; height: 600px; background-color: #f0f9f2; border: 1px solid #ccc; position: relative; }
        .x-axis { display: flex; justify-content: space-between; font-weight: bold; color: #555; padding: 5px 0; margin-left: 40px; }
        .disc-wrapper { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); transition: transform 0.2s; }
        .disc-wrapper:hover { z-index: 5; transform: translate(-50%, -50%) scale(1.1); }
        .disc-point { width: 30px; height: 30px; border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.5); z-index: 2; cursor: pointer; }
        .disc-label { font-size: 11px; background-color: rgba(255, 255, 255, 0.9); padding: 1px 3px; border-radius: 3px; position: absolute; white-space: nowrap; z-index: 3; pointer-events: none; }
        .disc-label.below { top: 100%; margin-top: 5px; left: 50%; transform: translateX(-50%); }
        .disc-details-small { font-size: 0.8em; color: #666; }

        /* Presentationsvy */
        .presentation-grid-wrapper { display: flex; flex-wrap: wrap; gap: 20px; }
        .presentation-box { border: 2px solid #e0e0e0; border-radius: 8px; padding: 10px; flex: 1 1 45%; min-width: 200px; background: #ffffff; }
        .presentation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
        .presentation-hole { position: relative; background-color: #f7f7f7; border: 1px solid #e9e9e9; border-radius: 4px; padding: 8px; font-size: 0.75em; line-height: 1.3; }
        .presentation-hole h3 { margin-top: 0; margin-bottom: 4px; font-size: 1.1em; }
        .presentation-hole strong { color: #054a17; }
        .presentation-hole .disc-details-small { font-size: 0.9em; }
        /* FIX: Bild i presentationsvy (60px) */
        .presentation-disc-image {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 60px; 
            height: 60px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            border: 1px solid #ddd;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        /* Lightbox (stor bild-popup) */
        .lightbox-image-clickable { cursor: zoom-in; }
        #lightboxModal { z-index: 1002; }
        
        /* Väsk-Dashboard (laptop: väsklista + discar sida vid sida, flight chart under discarna i full bredd) */
        .bag-dashboard-layout { display: grid; grid-template-columns: 20% 1fr; gap: 25px; align-items: start; }
        .bag-nav-column { grid-column: 1; grid-row: 1; }
        .bag-main-column { grid-column: 2; grid-row: 1; }
        .bag-nav-list { list-style: none; padding: 0; margin: 0; position: sticky; top: 20px; }
        .bag-nav-list li { padding: 12px 10px; border-radius: 6px; cursor: pointer; font-weight: 500; margin-bottom: 5px; border: 1px solid #eee; background: #f9f9f9; display: flex; justify-content: space-between; align-items: center; }
        .bag-nav-list li:hover { background: #f0f2f5; }
        .bag-nav-list li.active { background-color: #054a17; color: white; border-color: #054a17; }
        .bag-nav-list .disc-count { font-size: 0.9em; opacity: 0.7; }
        .disc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
        /* Disc category chip picker - used both as a fixed-list editor (single-disc
           edit view, batch modal) and as a live multi-select filter row above the grid */
        .category-picker { display: flex; flex-wrap: wrap; gap: 6px; }
        .category-chip { border: 1px solid #ccc; background: #fff; color: #444; border-radius: 14px; padding: 4px 12px; font-size: 0.8em; cursor: pointer; transition: all 0.15s; }
        .category-chip:hover { border-color: #1a73e8; }
        .category-chip.active { background: #1a73e8; border-color: #1a73e8; color: #fff; }
        .category-filter-row { margin-bottom: 12px; }
        .category-picker-empty-hint { font-size: 0.85em; color: #888; font-style: italic; }
        /* Small "×" affix on a chip, used by the category-management UI in
           settings.html (not the picker chips elsewhere, which only toggle). */
        .category-chip-remove { margin-left: 6px; font-weight: bold; cursor: pointer; }
        .category-chip-remove:hover { color: #b00020; }
        #disc-categories-chip-list .category-chip { cursor: default; }
        /* Subtle, space-saving toggle for the in-bag category filter row -
           plain text+icon link rather than a colored .bag-toolbar-btn circle,
           since this is a display toggle, not an action. */
        .category-filter-toggle-btn { background: none; border: none; color: #555; font-size: 0.85em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; margin-bottom: 6px; }
        .category-filter-toggle-btn:hover { color: #1a73e8; }
        .category-filter-chevron { font-size: 0.75em; transition: transform 0.15s; }
        .category-filter-toggle-btn.expanded .category-filter-chevron { transform: rotate(180deg); }
        .category-filter-badge { background: #1a73e8; color: #fff; border-radius: 999px; font-size: 0.75em; padding: 1px 7px; line-height: 1.4; }
        .disc-card { background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 10px; cursor: pointer; transition: box-shadow 0.2s; }
        .disc-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
        .disc-card-content { display: flex; gap: 10px; align-items: center; }
        .disc-card-image { width: 45px; height: 45px; border-radius: 50%; background-size: cover; background-position: center; flex-shrink: 0; border: 1px solid #eee; position: relative; }
        .disc-card-info { font-size: 0.9em; line-height: 1.4; overflow: hidden; }
        .disc-card-info strong { font-size: 1.1em; color: #333; white-space: nowrap; }
        .disc-card-info span { display: block; color: #555; white-space: nowrap; }
        .disc-card-source-bag { font-size: 0.8em; color: #888; font-style: italic; white-space: nowrap; }
        /* Alla discar (cross-bag view) - scope checkboxes + bag checklist above the flat grid */
        .all-discs-scope-group { margin-bottom: 14px; }
        .all-discs-scope-header { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.95em; margin-bottom: 8px; }
        .all-discs-scope-header strong { color: #054a17; }
        .all-discs-bag-checklist { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 22px; }
        .all-discs-bag-checklist .batch-disc-item { cursor: pointer; }
        /* Grid/list view toggle button for Alla discar - small pill, matches
           .button-secondary weight without competing with the real action
           buttons elsewhere in the toolbar. */
        .all-discs-view-toggle-btn { background: #f0f2f5; border: 1px solid #ddd; color: #333; border-radius: 999px; padding: 6px 14px; font-size: 0.85em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; }
        .all-discs-view-toggle-btn:hover { background: #e3e8ea; }
        /* Alla discar list view - column filter chip groups (Varumärke/Plast/
           Speed/Glide/Turn/Fade), stacked one per line under "Filtrera" */
        .all-discs-column-filters-row { flex-direction: column; gap: 10px; margin: 12px 0; }
        .all-discs-column-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
        .all-discs-column-filter-label { font-size: 0.85em; color: #666; font-weight: 500; min-width: 80px; }
        /* Alla discar list view - the data table itself */
        .all-discs-table-scroll { overflow-x: auto; }
        .all-discs-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
        .all-discs-table th, .all-discs-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #eee; white-space: nowrap; }
        .all-discs-table th { background: #f8f9fa; color: #054a17; font-weight: 600; }
        .all-discs-table tbody tr:hover { background: #f8f9fa; }
        .bag-dashboard-sidebar { grid-column: 2; grid-row: 2; position: static; display: flex; flex-direction: column; gap: 15px; }
        .bag-dashboard-sidebar .chart-grid { width: 100%; height: auto; aspect-ratio: 4 / 3; }
        .bag-dashboard-sidebar .x-axis, .bag-dashboard-sidebar .y-axis { display: none; }
        .bag-dashboard-sidebar .chart-container { margin: 0; }
        .bag-dashboard-sidebar #flightChartGridInBag { background: #f7f7f7; border: 1px solid #eee; }
        
        /* Flight chart header with mirror button */
        .flight-chart-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .flight-chart-header h3 {
            margin: 0;
            flex-grow: 0;
        }
        
        /* Mirror toggle button - round yellow button */
        .mirror-toggle-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #f5a623;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s, transform 0.1s;
            padding: 0;
        }
        
        .mirror-toggle-btn i {
            font-size: 1rem;
            color: #fff;
        }
        
        .mirror-toggle-btn:hover {
            background-color: #e69516;
            transform: scale(1.05);
        }
        
        .mirror-toggle-btn:active {
            transform: scale(0.95);
        }
        
        .mirror-toggle-btn.active {
            background-color: #d68410;
        }
        
        /* Orientation labels for flight chart */
        .flight-chart-orientation-labels {
            margin-bottom: 8px;
        }
        
        .orientation-label {
            color: #7b5ea7;
            font-size: 0.85rem;
            font-weight: 500;
            margin-bottom: 4px;
            display: none;
            line-height: 1.3;
        }
        
        .orientation-label.active {
            display: block;
        }
        
        /* Legacy chart-controls (can be removed if not used elsewhere) */
        .chart-controls { display: flex; gap: 8px; margin-bottom: 8px; }
        .chart-controls .button-secondary.active { 
            background-color: #054a17; 
            color: white; 
            border-color: #054a17; 
        }
		
		/* Vänsterpil + Tillbaka */
		#backToMainFromDashboard,
		#backToCourseListBtn {
		  display: inline-flex;
		  align-items: center;   /* vertikalcentrera som bas */
		  gap: 6px;
		}

		/* Justera vänsterpilen */
		#backToMainFromDashboard::before,
		#backToCourseListBtn::before {
		  font-family: "Font Awesome 6 Free";  /* eller din FA-font */
		  font-weight: 900;
		  content: "\f060";
		  margin-right: 2px;
		  position: relative;
		  top: -1px;            /* testa -1px eller -2px tills det ser rätt ut */
		}

		/* Mobilpilarna i "Bläddra väskor" */
		.mobile-arrow-btn {
		  display: inline-flex;
		  align-items: center;
		  justify-content: center;
		  width: 44px;
		  height: 44px;
		  padding: 0;
		}

		.mobile-arrow-btn i.fas {
		  font-size: 1.3rem;        /* tydlig ikon */
		}

		/* Extra boost på mindre mobiler */
		@media (max-width: 600px) {
		  .mobile-arrow-btn {
			width: 48px;
			height: 48px;
		  }

		  .mobile-arrow-btn i.fas {
			font-size: 1.5rem;
		  }
		}
		
		/* Mittlinje i flight chart (rakt) */
		#flightChartGridInBag .flightchart-midline {
			position: absolute;
			top: 0;
			bottom: 0;
			width: 2px;
			background: rgba(0, 0, 0, 0.15);
			pointer-events: none;
			transform: translateX(-50%);
		}

		#flightChartGridInBag .flightchart-header {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 15%;
			pointer-events: none;
			font-size: 0.7rem;
			color: #555;
		}

		#flightChartGridInBag .flightchart-header-item {
			position: absolute;
			top: 0;
			transform: translateX(-50%);
			white-space: nowrap;
		}

		#flightChartGridInBag .flightchart-header-item::after {
			content: "";
			position: absolute;
			top: 1.1em;
			left: 50%;
			width: 1px;
			height: 6px;
			background: rgba(0, 0, 0, 0.25);
			transform: translateX(-50%);
		}
		
		/* Mirror functionality is now handled via coordinate calculation in JS */
		/* CSS transform approach removed to keep text readable */
		/* The .mirrored class is no longer used for transforms */
		

        /* Disc-detalj-modal */
        .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; }
        .modal-header h2 { margin: 0; }
        .more-menu { position: relative; }
        .more-menu .icon-button svg { width: 20px; height: 20px; }
        .dropdown-content { display: none; position: absolute; right: 0; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1001; border-radius: 6px; }
        .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; font-size: 0.9em; }
        .dropdown-content a:hover { background-color: #ddd }
        .dropdown-content.show { display: block; }
        #detail-disc-image { width: 150px; height: 150px; margin: 0 auto 15px auto; background-color: #f0f2f5; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 50%; border: 2px solid #eee; position: relative; overflow: hidden; cursor: pointer; }
        .detail-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 20px; }
        .detail-info-grid span { font-weight: 500; min-height: 57px; } /* Här ställs höjd in så att knapp-pilarna för discar i väskan inte hoppar */
        
        /* --- Uppdaterad stil för Navigationspilar i modalen --- */
        .modal-nav-arrow {
            position: absolute;
            /* Justera 'top' om du vill flytta dem upp/ner. 
               150px brukar hamna mitt på bilden. */
            top: 135px; 
            width: 45px;
            height: 45px;
            background-color: rgba(60, 60, 60, 0.6); /* Mörkgrå, lite genomskinlig */
            color: #fff;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10000 !important; /* Se till att de ligger ovanpå bilden */
            font-size: 1.5rem;
            transition: background-color 0.2s, transform 0.1s;
            outline: none;
            padding: 0; /* Centrerar pilen exakt */
        }

        .modal-nav-arrow:hover {
            background-color: rgba(60, 60, 60, 0.9); /* Mörkare vid hover */
            transform: scale(1.05);
        }

        .modal-nav-arrow:active {
            transform: scale(0.95);
        }

        .modal-nav-arrow.left {
            left: 10px;
        }

        .modal-nav-arrow.right {
            right: 10px;
        }

        /* Dölj pilarna om vi inte vill visa dem (hanteras av JS) */
        .modal-nav-arrow[style*="display: none"] {
            display: none !important;
        }
        #edit-disc-image-container { width: 150px; height: 150px; margin: 0 auto 15px auto; background-color: #f0f2f5; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 50%; border: 2px solid #eee; position: relative; overflow: hidden; cursor: pointer; }
        #edit-disc-image-container img { width: 100%; height: 100%; object-fit: cover; }
        
        /* Spinner */
        .spinner { display: none; border: 4px solid #f3f3f3; border-top: 4px solid #054a17; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 20px auto; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* Cirkel-beskärning och pilar */
        #cropImageModal { z-index: 1001; }

        /* Standard: Fyrkantig */
        .cropper-view-box, .cropper-face { 
            border-radius: 0; 
        }

        /* Endast rund när vi ber om det */
        .crop-modal-round .cropper-view-box, 
        .crop-modal-round .cropper-face { 
            border-radius: 50% !important; 
            outline: 2px solid white;
        }

        .cropper-dashed, .cropper-line, .cropper-point { display: none !important; }
        .cropper-controls { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 15px; background: #f0f2f5; padding: 10px; border-radius: 8px; }
        .cropper-controls > div { display: flex; gap: 5px; }
        .cropper-controls .icon-button { font-size: 20px; font-weight: bold; width: 40px; height: 40px; line-height: 36px; padding: 0; }

        /* Toast-meddelanden */
        .toast { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 16px; position: fixed; z-index: 2000; left: 50%; transform: translateX(-50%); bottom: 30px; font-size: 17px; opacity: 0; transition: opacity 0.5s, bottom 0.5s; }
        .toast.show { visibility: visible; opacity: 1; bottom: 50px; }
        .toast.success { background-color: #054a17; }
        .toast.error { background-color: #d9534f; }

        /* Hover-effekt för bilder */
        .disc-card-image, #detail-disc-image { position: relative; } 
        .disc-image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
        .disc-image-overlay i { color: white; font-size: 20px; } 
        #detail-disc-image .disc-image-overlay i { font-size: 30px; }
        .disc-card:hover .disc-image-overlay,
        #detail-disc-image:hover .disc-image-overlay { opacity: 1; }
        #edit-disc-image-container:hover .disc-image-overlay { opacity: 1; pointer-events: auto; }

        /* E-postformulär */
        .auth-form { background-color: #f9f9f9; border: 1px solid #eee; border-radius: 8px; padding: 20px; }
        .auth-form h3 { margin-top: 0; text-align: center; }
        .auth-form input {
          display: block;
          width: 100%;
          box-sizing: border-box;
          padding: 10px;
          margin: 6px 0;
          font-size: 1rem;
          border: 1px solid #ccc;
          border-radius: 6px;
        }
        .auth-toggle-link { font-size: 0.9em; color: #555; text-decoration: none; }
        .auth-toggle-link:hover { text-decoration: underline; }
        
		/* ====== NY HEADER-LAYOUT ====== */
		#newAppHeader {
		  display: flex;
		  justify-content: space-between;
		  align-items: flex-start;
		  gap: 1rem;
		  padding: 8px 0 6px 0;
		  border-bottom: 1px solid #eee;
		  margin-bottom: 8px;
		  box-sizing: border-box;
		}

		/* Logo */
		#appLogo {
		  width: auto;
		  cursor: pointer;
		  transition: opacity 0.2s;
		}
		#appLogo:hover { opacity: 0.8; }

		/* Om du har #header-right runt auth + language-switcher */
		#header-right {
		  display: flex;
		  flex-direction: column;
		  align-items: flex-end;
		  gap: 4px;
		}

		/* Auth-container – stapla vertikalt */
		#authContainer {
		  display: flex;
		  flex-direction: column;
		  align-items: flex-end;
		  max-width: 230px;
		  width: 100%;
		}

		/* Hjälptext under knappar (utloggad läge) */
		.auth-helper-text {
		  text-align: right;
		  margin-top: 0.5rem;
		  font-size: 0.9em;
		}

		/* Inloggad-raden – viktig för mobile wrap */
		#authContainer .logged-in-info {
		  margin: 0;
		  font-size: 0.9em;
		  line-height: 1.3;
		  text-align: right;
		  white-space: nowrap;    /* tillåt radbrytning */
		/*  word-break: break-word;   bryt långa mejladresser */
		}
		
		/* "Inloggad som:"-label */
		.logged-in-label {
		  font-weight: normal;
		}

		/* Namn-rad */
		.logged-in-name strong {
		  font-weight: 700;
		}
		
		/* Gör "(Admin)" osplitbart */
		.logged-in-role {
		  white-space: nowrap;
		}
		
		/* Länk-styling för Admin */
		.admin-link {
		  color: #6a1b9a;
		  text-decoration: none;
		}
		.admin-link:hover {
		  text-decoration: underline;
		}

		/* Logga ut-knapp kompakt */
		#authContainer #logoutBtn {
		  display: block;
		  width: 100%;
		  max-width: 90px;      /* Bredd på brandgul Logga ut-knapp */
		  height: 100%;
		  max-height: 22px;
		  margin: 0px auto 0px;    /* auto vänster/höger = centrera inom authContainer */
		  padding: 4px 14px;     
		  font-size: 0.85rem;
		  line-height: 1.1; 
		}

		/* Rad med ikoner – centrerad under "Inloggad som" */
		#language-switcher {
		  display: flex;
		  align-items: center;
		  justify-content: center;   /* centrerad även på laptop */
		  gap: 8px;
		}

		/* Grundstil för alla 6 knappar (ikon + språk) */
		.header-circle-btn {
		  width: 34px;
		  height: 34px;
		  border-radius: 50%;
		  border: 2px solid #054a17;
		  background-color: #fff;
		  display: inline-flex;
		  align-items: center;
		  justify-content: center;
		  padding: 0;
		  cursor: pointer;
		  font-size: 0.8rem;
		  line-height: 1;
		  box-sizing: border-box;
		}

		/* Ikonfärg och storlek. svg täcker de inline-SVG-ikoner (t.ex.
		   discgolf-väska/korg från game-icons.net) som ersatt Font Awesome
		   på vissa knappar - utan denna rad ärver deras fill:currentColor
		   annars webbläsarens default länkfärg (syns som lila på besökta
		   länkar) i stället för appens gröna tema. */
		.header-circle-btn i,
		.header-circle-btn svg {
		  font-size: 1.1rem;
		  color: #054a17;     /* justera till din primär/sekundärfärg */
		}

		/* Språkknappar (SE/GB/FI) */
		.lang-btn {
		  font-weight: 600;
		  font-size: 1.1rem;
		  border-color: #054a17;
		}

		/* Aktivt språk */
		.lang-btn.active {
		  background-color: #054a17;
		  color: #fff;
		  border-color: #054a17;
		}

		/* Hover */
		.header-circle-btn:hover {
		  background-color: #f0f2f5;
		}

		/* Aktiv sida i menyraden. Ringen gör den urskiljbar även genom
		   guidens lila nedtoning (som annars gör aktiv/inaktiv svårt att
		   skilja åt eftersom hela raden mörknar). */
		.header-circle-btn.active {
		  background-color: #054a17;
		  box-shadow: 0 0 0 2px #7ee8a0;
		}
		.header-circle-btn.active i,
		.header-circle-btn.active svg {
		  color: #fff;
		}

		/* Score-navikonen pulserar när användaren har ett aktivt scorekort
		   (eget eller delat) igång, oavsett vilken sida hen befinner sig på -
		   se updateScoreNavPulse() i shared/app-core.js. */
		@keyframes score-nav-pulse {
		  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 179, 71, 0.7); }
		  50% { box-shadow: 0 0 0 5px rgba(255, 179, 71, 0); }
		}
		.header-circle-btn.has-active-round {
		  border-color: #ffb347;
		  animation: score-nav-pulse 2s ease-in-out infinite;
		}
		.header-circle-btn.has-active-round i,
		.header-circle-btn.has-active-round svg {
		  color: #ffb347;
		}

		/* Språk-dropdown */
		.lang-dropdown {
		  position:  relative;
		}

		.lang-flag-current {
		  font-size: 1.3rem;
		  cursor: pointer;
		}

		.lang-dropdown-content {
		  display: none;
		  position: absolute;
		  right: 0;
		  top:  42px;
		  background: white;
		  border: 2px solid #054a17;
		  border-radius: 8px;
		  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		  z-index: 1000;
		  min-width: 150px;
		  /* 12 languages no longer fit without scrolling on a short mobile
		     viewport - overflow-x stays hidden so rounded corners on the
		     first/last .lang-option still clip cleanly. */
		  max-height: min(70vh, 480px);
		  overflow-y: auto;
		  overflow-x: hidden;
		}

		.lang-dropdown-content.show {
		  display: block;
		}

		.lang-option {
		  display: block;
		  width: 100%;
		  padding:  10px 14px;
		  border:  none;
		  background: white;
		  text-align: left;
		  cursor: pointer;
		  font-size: 0.95rem;
		  transition: background 0.2s;
		}

		.lang-option:hover {
		  background:  #f0f2f5;
		}

		.lang-option:active {
		  background: #e0e2e5;
		}

		/* Gör raden "Discnamn och info" fullbredd i gridden */
		.detail-fulldiscnameinfo-row {
		  grid-column: 1 / -1;      /* spänn över alla kolumner */
		  margin-top: 8px;
		  display: grid;
		  grid-template-columns: auto 1fr; /* label + flexande text */
		  column-gap: 4px;
		  align-items: flex-start;
		}

		/* Lås höjden till plats för två text-rader */
		  line-height: 1.3;
		  max-height: calc(1.3em * 2);  /* 2 rader totalt (label+text) */
		  overflow: hidden;
		}
        
        .field-label-row {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 4px;
        }

        .add-course-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 28px;
          height: 28px;
          min-width: 28px;
          padding: 0;
          font-size: 16px;
          font-weight: 700;
          line-height: 1;
          border-radius: 50%;
          background: #ffb347;
          color: #3a2a00;
          border: 1px solid #e6972e;
          cursor: pointer;
        }
        
		/* Labeln (Discnamn och info:) hålls på en rad */
		.detail-fullinfo-row .detail-label {
		  white-space: nowrap;
		}

		/* Själva texten till höger om labeln */
		.detail-fullinfo-text,
		#detail-disc-fullinfo {
		  display: -webkit-box;
		  -webkit-box-orient: vertical;
		  -webkit-line-clamp: 2;        /* max 2 rader för textdelen */
		  overflow: hidden;
		  text-overflow: ellipsis;
		  white-space: normal;
		  word-break: break-word;
		}

		/* ====== Mobilanpassning för headern ======
		@media (max-width: 600px) {
		  #newAppHeader {
			flex-direction: column;
			align-items: stretch;
		  } */

		  /* På små skärmar: tillåt radbrytning + centrering */
			@media (max-width: 600px) {
			  #authContainer .logged-in-info {
				text-align: center;
			  }
			}

		  #appLogo {
			margin: 10 0 auto;
			max-height: 70px;
		  }

		  #header-right,
		  #authContainer {
			align-items: stretch;
		  }

		  #authContainer .logged-in-info,
		  .auth-helper-text {
			text-align: center;
		  }

		  #language-switcher {
			justify-content: center;
		  }
		}
		
        /* Fullskärms-presentation */
        body.presentation-active .container { max-width: 100%; height: 100vh; margin: 0; padding: 0; border-radius: 0; box-shadow: none; box-sizing: border-box; }
        body.presentation-active #appContainer,
        body.presentation-active #single-course-view { height: 100%; }
        body.presentation-active #single-course-view { display: flex; flex-direction: column; padding: 10px; box-sizing: border-box; }
        body.presentation-active #hole-planning-container { flex-grow: 1; overflow-y: auto; }
        body.presentation-active .container > #main-app-view > div[style*="text-align: right"],
        body.presentation-active .container > #main-app-view > #authContainer,
        body.presentation-active #backToCourseListBtn,
        body.presentation-active #active-bag-selector-wrapper,
        body.presentation-active #single-course-view hr { display: none; }

        /* FIX: Bild i "Välj disc"-listan */
        .list-disc-image {
            width: 40px; height: 40px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
            border: 1px solid #ccc;
            margin-left: 15px;
        }

        /* Mobilanpassning */
        @media (max-width: 768px) {
            body { margin: 0; padding: 0; }
            .main-layout { grid-template-columns: 1fr; gap: 30px; }
            .container { 
                margin: 0; 
                padding: 10px; 
                border-radius: 0; 
                box-shadow: none; 
                box-sizing: border-box;
                width: 100%;
                max-width: 100%;
                overflow-x: hidden;
            }
            h1 { font-size: 1.8em; }
            h2 { font-size: 1.4em; word-wrap: break-word; }
            
            /* Ensure all inputs and buttons fit on mobile */
            input[type="text"], 
            input[type="number"], 
            input[type="email"],
            input[type="password"],
            select, 
            textarea { 
                width: 100%; 
                box-sizing: border-box; 
                font-size: 16px; /* Prevent zoom on iOS */
            }
            
            .button { 
                font-size: 14px; 
                padding: 8px 12px;
                width: 100%;
                box-sizing: border-box;
            }
            
            .bag-dashboard-layout { grid-template-columns: 1fr; }

            /* GÖM den gamla väsk-listan på mobilen */
            .bag-nav-column { display: none; }

            /* VISA den nya navigeringen på mobilen */
            #mobile-bag-controls { display: flex !important; }

            .disc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

            /* Mobil: behåll flight chart som tidigare (fast höjd, ordinarie flöde) - layouten ovan är bara för laptop */
            .bag-nav-column, .bag-main-column, .bag-dashboard-sidebar { grid-column: 1; grid-row: auto; }
            .bag-dashboard-sidebar { position: static; }
            .bag-dashboard-sidebar .chart-grid { height: 350px; aspect-ratio: auto; }
            
            /* Make modal content fit on mobile */
            .modal-content {
                width: 95%;
                max-width: 95%;
                margin: 10px auto;
                padding: 15px;
                box-sizing: border-box;
            }
            
            /* Fix header on mobile */
            #newAppHeader {
                padding: 8px 10px;
                gap: 0.5rem;
                flex-wrap: wrap;
            }
            
            #appLogo {
                max-width: 120px;
                height: auto;
            }
            
            #language-switcher {
                flex-wrap: wrap;
                gap: 6px;
            }
            
            .header-circle-btn {
                width: 32px;
                height: 32px;
            }
        }
		
		/* FIX: Gör lightbox-bilden rund och i en fast storlek (Mobil & Dator) */
        #lightboxImage {
            display: block;
            margin: auto;
            
            /* HÄR ÄR MAGIN: */
            /* Sätt både bredd och höjd till det som är MINST av: */
            /* 1. 90% av skärmens bredd (vw) */
            /* 2. 70% av skärmens höjd (vh) */
            width: min(90vw, 70vh);
            height: min(90vw, 70vh);
            
            object-fit: cover; /* Se till att bilden fyller cirkeln utan att sträckas */
            border-radius: 50%; /* Gör den rund */
            
            /* Centrera vertikalt */
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
		
		/* =============================================== */
        /* === BANA-LISTAN (PB UNDER NAMN) === */
        /* =============================================== */

        #courseList li {
            /* Flexbox gör det enkelt att stapla */
            display: flex;
            flex-direction: column; /* Stapla vertikalt: Namn -> PB -> Knappar */
            align-items: flex-start; /* Vänsterjustera allt */
            padding: 15px;
            border-bottom: 1px solid #eee;
        }
        
        /* Ta bort sista linjen */
        #courseList li:last-child { border-bottom: none; }

        /* Namnet */
        .course-name-link {
            font-weight: 700;
            font-size: 1.2em; /* Lite större rubrik */
            color: #054a17;
            text-decoration: none;
            cursor: pointer;
            display: block;
            margin-bottom: 2px; /* Väldigt litet avstånd ner till PB */
            width: 100%; /* Klickbar yta över hela bredden */
        }
        .course-name-link:hover {
            text-decoration: underline;
            color: #032b0d;
        }
        /* Gör parentesen (18 hål) lite mindre och grå */
        .course-name-link span {
            font-size: 0.85em;
            color: #777;
            font-weight: normal;
        }

        /* PB-raden (Ligger nu direkt under namnet) */
        .course-meta-info {
            font-size: 1.0em; 
            font-weight: 500;
            color: #333;
            margin-bottom: 15px; /* Luft ner till knapparna */
            display: flex;
            align-items: center;
            cursor: help;
        }
        
        /* "PB:" texten */
        .pers-text { 
            font-weight: bold; 
            color: #555; 
            margin-right: 6px;
        }

        /* Siffran */
        .pers-value { font-weight: bold; }
        .pers-value[data-pers-score^="-"] { color: #054a17; }
        .pers-value[data-pers-score^="+"] { color: #d9534f; }
        .pers-value[data-pers-score="E"] { color: #000; }
        
        /* Separator between PB and Goal in 'both' mode */
        .meta-separator {
            margin: 0 5px;
            color: #999;
        }
        
        /* 3. Knappar */
        .disc-actions {
            display: flex;
            gap: 10px;
            width: 100%;
        }
        
        /* Knappar på mobil */
        .disc-actions button {
			padding: 10px 14px; /* Lite mer tryckvänliga på mobil */
            font-size: 1em;
        }
        
        /* Logik för "Planera"-texten */
        .plan-course-btn-text { display: inline; margin-right: 5px; } /* Mobil: Dölj text */


        /* === DATOR-VY (Större skärmar) === */
        /* Här lägger vi tillbaka allt på en rad */
        @media (min-width: 768px) {
            #courseList li {
                flex-direction: row; /* Lägg allt på en rad */
                align-items: center;
                justify-content: space-between; /* Sprid ut innehållet */
            }

            .course-name-link {
                margin-bottom: 0;
                width: auto; /* Inte fullbredd på dator */
                flex-grow: 1; /* Låt namnet ta upp ledig plats */
            }

            .course-meta-info {
                margin-bottom: 0;
                margin-right: 30px; /* Avstånd till knapparna */
            }

            .disc-actions {
                width: auto; /* Knapparna tar bara den plats de behöver */
            }
            
            .disc-actions button {
                padding: 6px 12px; /* Lite kompaktare knappar på dator */
                font-size: 0.9em;
            }

            .plan-course-btn-text { display: inline; margin-right: 5px; } /* Dator: Visa text */
        }
		
		/* =============================================== */
		/* === NY STYLING FÖR SIDHUVUD (LOGO) =========== */
		/* ============================================= */
		
		/* Språkflaggor */
		.lang-flag-btn {
			padding: 4px 8px;
			font-size: 1.2rem;
			line-height: 1;
			border-radius: 999px;
			min-width: 40px;
			text-align: center;
		}

		/* Liten hover-effekt */
		.lang-flag-btn:hover {
			background-color: #d0d2d8;
		}

		/* Markera aktivt språk */
		.lang-flag-btn.active {
			background-color: #054a17;
			color: #fff;
		}
		
		/* ===================================================== */
        /* === FIX FÖR LOGO I PRESENTATIONSLÄGE (RESPONSIV) === */
        /* =================================================== */

         /*    LAPTOP / DATOR (Skärmar bredare än 768px) */
         /* Här tvingar vi in loggan i mitten precis som på startsidan */
         @media (min-width: 768px) {
            body.presentation-active #newAppHeader {
                max-width: 1220px; /* Samma max-bredd som .container */
                
                /* Centrera lådan */
                margin-left: auto;
                margin-right: auto;
				border-bottom: 1px solid #eee;
				margin-bottom: 8px;
				box-sizing: border-box;
                
                /* Samma padding som din vanliga desktop-container har */
                padding: 8px 0px 6px 0px; 
            }
        }
		/* =============================================== */
        /* === FIX FÖR LIST-BILDER (Planera & Välj) ===== */
        /* ============================================= */
        
        /* Denna klass används av JavaScriptet för små bilder i listor */
        .list-disc-image-small {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            flex-shrink: 0; /* Viktigt: Förhindrar att bilden trycks ihop */
            border: 1px solid #ccc;
            margin-left: 15px;
            display: block; /* Säkerställ att den visas */
            background-color: #eee; /* Fallback-färg */
        }
		
		/* =============================================== */
        /* === FIX FÖR PRESENTATION                 ===== */
        /* ============================================= */
		
		#single-course-view h2#coursePlanName {
		  display: block;
		  margin-top: 12px;   /* testa 12–16 tills det ser bra ut */
		  margin-bottom: 8px;
		}
		
		#coursePlanName {
		white-space: pre-line;  /* tolkar \n som radbryt */
		}
		
		/* === Planner-layout för hål === */

		.hole-item {
		  display: grid;
		  /* Hål | Kasttyp | Disc | Anteckning */
		  grid-template-columns: 80px 220px minmax(0, 1fr) 260px;
		  column-gap: 16px;
		  padding: 10px 8px;
		  border-bottom: 1px solid #eee;
		  align-items: flex-start;
		}
		
		/* Hålrubrik */
		.hole-column-number h3 {
		  margin: 0;
		}

		/* Kasttyp-kolumn: ta bort extra vertikalmarginal */
		.hole-column-throw .hole-item-row {
		  margin: 0;
		}

		/* Disc-kolumn: ingen extra margin uppåt */
		.hole-column-disc {
		  margin: 0;
		}

		/* Fältkolumnerna */
		.hole-item .hole-column-throw {
		  /* Kasttyp-kolumn */
		}

		.hole-item .hole-column-disc {
		  /* Disc-kolumn */
		}

		.hole-item .hole-column-note {
		  /* Antecknings-kolumn */
		}

		/* Disc-rutan i planner */
		.selected-disc-info {
		  display: flex;
		  align-items: center;
		  justify-content: space-between;   /* text vänster, bild höger */
		  background-color: #f5f6f7;
		  border-radius: 12px;
		  padding:    10px;
		  min-height: 60px;
		  width: 100%;
		}

		/* Texten (mold + flight) tar all flexbredd */
		.selected-disc-info-text {
		  flex: 1 1 auto;
		  margin-right: 8px;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  white-space: nowrap;   /* klipp vid slutet om det blir för långt */
		}

		/* Bilden högerställd */
		.selected-disc-info img,
		.selected-disc-info .disc-preview-circle {
		  flex: 0 0 auto;
		}

		/* Bilden: fixera storlek och hindra krympning */
		.selected-disc-info .list-disc-image-small {
		  flex: 0 0 auto;
		  width: 60px;
		  height: 60px;
		  margin-left: 0;
		}

        /* Gör hela rutan klickvänlig */
        .selected-disc-info.clickable {
            cursor: pointer;
            transition: background-color 0.2s, transform 0.1s;
            /* Se till att vi kan placera pilen rätt */
            padding-right: 8px; 
        }

        /* Hover-effekt (viktigt för desktop) */
        .selected-disc-info.clickable:hover {
            background-color: #e8eaed; /* Lite mörkare än f5f6f7 */
            border: 1px solid #d0d2d6; /* Valfritt: Subtil kantlinje vid hover */
        }

        /* Klickeffekt */
        .selected-disc-info.clickable:active {
            transform: scale(0.98);
        }

        /* Pilen */
        .disc-select-arrow {
            color: #ccc; /* Ljusgrå så den inte stör */
            margin-left: 10px;
            font-size: 0.9em;
            display: flex;
            align-items: center;
        }

        /* Gör pilen mörkare vid hover så man fattar att den hör ihop */
        .selected-disc-info.clickable:hover .disc-select-arrow {
            color: #054a17; /* Din gröna accentfärg */
        }

		/* Anteckningsfält (desktop/laptop) */
		.hole-note-label {
		  display: block;
		  font-weight: 600;
		}

		.hole-note-input {
		  width: 100%;
		  min-height: 4.5em;      /* ca 3–4 rader */
		  max-height: 8em;
		  resize: none;           /* går inte att förstora */
		  box-sizing: border-box;
		  font-size: 0.9rem;
		}
		
		.hole-column-throw .hole-item-row,
			.hole-column-disc .selected-disc-info,
			.hole-column-note .hole-note-label {
			margin: 0;
		  }
		
		@media (max-width: 700px) {
		  .hole-item {
			display: block;          /* istället för grid */
			padding: 10px 8px;
		  }
          
		  .hole-column-throw .hole-item-row,
			.hole-column-disc .selected-disc-info,
			.hole-column-note .hole-note-label {
			margin: 0;
			display: flex;
			justify-content: flex-start;
		  }

		  .selected-disc-info .list-disc-image-small {
			  flex: 0 0 auto;
		  }

		  .hole-note-input {
			width: 100%;
			min-height: 4.5em;
		  }
		  
		   .selected-disc-info-text {
			position: relative;
			color: transparent;   /* dölj originaltextens färg */
		  }

		  .selected-disc-info-text::before {
			content: attr(data-short-text); /* mold */
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			color: #000;          /* vanlig textfärg */
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		  }
          
          /* ÅTERSTÄLLNING FÖR TOMMA RUTOR */
    
            /* 1. Gör texten synlig igen (och mörkgrå/kursiv som den ska vara) */
            .selected-disc-info.is-empty .selected-disc-info-text {
                color: #666 !important; /* Mörkgrå så den syns */
                position: static;       /* Ta bort absolut positionering om det fanns */
            }

            /* 2. Dölj ::before-elementet så vi inte får dubbel text eller konstiga tecken */
            .selected-disc-info.is-empty .selected-disc-info-text::before {
                display: none !important;
                content: none;
            }
		}
			
			/* Anteckningsmodal i presentationsvy */
			#noteModal .modal-content {
			  max-width: 500px;
			  background: #fff;
			  border-radius: 12px;
			  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
			}

			#noteModal .modal {
			  background-color: rgba(0,0,0,0.6);
			}

			#note-modal-textarea {
			  width: 100%;
			  min-height: 120px;
			  padding: 10px;
			  border: 1px solid #ccc;
			  border-radius:  6px;
			  font-family:  inherit;
			  resize: vertical;
			  box-sizing: border-box;
			}

			/* Färgglad anteckningsikon */
			.note-indicator-icon {
			  display: inline-block;
			  margin-left: 6px;
			  font-size:  1.3em;
			  cursor: pointer;
			  transition: transform 0.2s, filter 0.2s;
			  
			/* Gradient:  gul → rosa → lila */
			  background: linear-gradient(135deg, #FFD700, #FF69B4, #DA70D6);
			  -webkit-background-clip: text;
			  -webkit-text-fill-color: transparent;
			  background-clip: text;
			  
			/* Glöd-effekt */
			  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
			}

			.note-indicator-icon:hover {
			  transform: scale(1.25);
			  filter: drop-shadow(0 0 8px rgba(255, 105, 180, 0.9));
			}

			.presentation-hole {
			  cursor: pointer;
			}

			.presentation-hole:hover {
			  background-color: #f0f2f5;
			}

			/* Bag tabs styling */
			.bag-tab {
			  padding: 10px 20px;
			  background: none;
			  border: none;
			  border-bottom: 3px solid transparent;
			  cursor: pointer;
			  font-size: 14px;
			  font-weight: 500;
			  color: #666;
			  transition: all 0.3s ease;
			}

			.bag-tab:hover {
			  color: #333;
			  background-color: #f5f5f5;
			}

			.bag-tab.active {
			  color: #2563eb;
			  border-bottom-color: #2563eb;
			  font-weight: 600;
			}

			/* Course tabs styling */
			.course-tab {
			  padding: 10px 20px;
			  background: none;
			  border: none;
			  border-bottom: 3px solid transparent;
			  cursor: pointer;
			  font-size: 14px;
			  font-weight: 500;
			  color: #666;
			  transition: all 0.3s ease;
			}

			.course-tab:hover {
			  color: #333;
			  background-color: #f5f5f5;
			}

			.course-tab[data-tab="my-courses"].active {
			  color: #e67e22;
			  border-bottom-color: #e67e22;
			  font-weight: 600;
			}

			.course-tab[data-tab="archived-courses"].active {
			  color: #7f8c8d;
			  border-bottom-color: #7f8c8d;
			  font-weight: 600;
			}

			/* Notification styles */
			.notification-item {
			  padding: 15px;
			  margin-bottom: 10px;
			  background: #f9f9f9;
			  border-radius: 8px;
			  border: 1px solid #e0e0e0;
			}

			.notification-item.pending {
			  background: #fff8ec;
			  border-color: #f6d8a8;
			}

			.notification-actions {
			  display: flex;
			  gap: 10px;
			  margin-top: 10px;
			}

			/* Collaborators list styling */
			.collaborator-item {
			  padding: 8px;
			  background: #f0f2f5;
			  margin-bottom: 5px;
			  border-radius: 4px;
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			}

			.collaborator-info {
			  display: flex;
			  flex-direction: column;
			}

			.btn-remove-collaborator {
			  padding: 4px 10px;
			  font-size: 0.85em;
			  cursor: pointer;
			}

			/* Bag tabs with colors */
			.bag-tab[data-tab="my-bags"].active {
			    color: #8B5CF6 !important;
			    border-bottom-color: #8B5CF6 !important;
			}

			.bag-tab[data-tab="shared-bags"].active {
			    color: #34a853 !important;
			    border-bottom-color: #34a853 !important;
			}

			.bag-tab[data-tab="others-bags"].active {
			    color: #1a73e8 !important;
			    border-bottom-color: #1a73e8 !important;
			}

			/* Trend tables - responsive styling */
			.trend-table {
			  width: 100%;
			  margin-bottom: 20px;
			  border-collapse: collapse;
			  overflow-x: auto;
			  display: block;
			}

			.trend-table thead,
			.trend-table tbody {
			  display: table;
			  width: 100%;
			  table-layout: auto;
			  min-width: max-content; /* Use max-content for better browser support than fit-content */
			}

			.trend-table th,
			.trend-table td {
			  padding: 8px;
			  border: 1px solid #ddd;
			  white-space: nowrap;
			  min-width: 80px;
			  text-align: center;
			}

			.trend-table tbody tr td:first-child {
			  background-color: #f7f7f7;
			  font-weight: bold;
			  position: sticky;
			  left: 0;
			  z-index: 1;
			}

			.trend-table thead tr {
			  background-color: #f0f2f5;
			}

			.trend-table thead th:first-child {
			  position: sticky;
			  left: 0;
			  z-index: 2;
			  background-color: #f0f2f5;
			}

			@media (max-width: 768px) {
			  .trend-table th,
			  .trend-table td {
			    min-width: 60px;
			    padding: 6px 4px;
			    font-size: 0.9em;
			  }
			}

/* Deactivated disc in planner (PR5) */
.selected-disc-info.disc-deactivated {
  opacity: 0.5;
}
.selected-disc-info.disc-deactivated .list-disc-image-small {
  filter: grayscale(100%);
}

/* Delete disc dialog actions (PR5 Hotfix 2) */
#delete-disc-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
  position: relative;
  z-index: 10;
}