/* Hatch Sense V2 - V1 Original Abstract Patterns restored */

:root, [data-theme="pine"] {
  --page-bg: #EAECE8;
  --color-primary: #8B6E4E; 
  --color-accent: #C49C5E; 
  --bg-overlay: rgba(234, 236, 232, 0.95);
  --color-surface: rgba(255, 255, 255, 0.75);
  --color-text: #1B2E15;
  
  --app-bg: none;
}

html.dark, html.dark[data-theme="pine"] {
  --page-bg: #122015; 
  --color-primary: #D4AF37;
  --color-accent: #E6C280;
  --bg-overlay: rgba(18, 32, 21, 0.95);
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-text: #F4EFE6;

  --app-bg: none;
}

/* Brown Trout */
[data-theme="brown"] {
  --page-bg: #F4EFE6;
  --color-primary: #8B5A2B;
  --color-accent: #D2691E;
  --bg-overlay: rgba(244, 239, 230, 0.95);
  --color-surface: rgba(255, 255, 255, 0.75);
  --color-text: #3E2723;
  
  --app-bg: url('assets/scales/light_brown.png');
}

html.dark[data-theme="brown"] {
  --page-bg: #1B2E15;
  --color-primary: #CD853F;
  --color-accent: #FF8C00;
  --bg-overlay: rgba(25, 20, 15, 0.95);
  --color-surface: rgba(45, 35, 25, 0.75);
  --color-text: #F5DEB3;

  --app-bg: url('assets/scales/dark_brown.png');
}

/* Brook Trout */
[data-theme="brook"] {
  --page-bg: #F4EFE6;
  --color-primary: #2E4A22;
  --color-accent: #FF7F50;
  --bg-overlay: rgba(244, 239, 230, 0.95);
  --color-surface: rgba(255, 255, 255, 0.75);
  --color-text: #1B2E15;
  
  --app-bg: url('assets/scales/light_brook.png');
}

html.dark[data-theme="brook"] {
  --page-bg: #1B2E15;
  --color-primary: #556B2F;
  --color-accent: #FFA07A;
  --bg-overlay: rgba(15, 25, 15, 0.95);
  --color-surface: rgba(25, 45, 25, 0.75);
  --color-text: #E8F5E9;

  --app-bg: url('assets/scales/dark_brook.png');
}

/* Cutthroat Trout */
[data-theme="cutthroat"] {
  --page-bg: #F4EFE6;
  --color-primary: #556B2F;
  --color-accent: #DC143C;
  --bg-overlay: rgba(244, 239, 230, 0.95);
  --color-surface: rgba(255, 255, 255, 0.75);
  --color-text: #2F241D;
  
  --app-bg: url('assets/scales/light_cutthroat.png');
}

html.dark[data-theme="cutthroat"] {
  --page-bg: #1B2E15;
  --color-primary: #8FBC8F;
  --color-accent: #FF6347;
  --bg-overlay: rgba(25, 15, 15, 0.95);
  --color-surface: rgba(45, 25, 25, 0.75);
  --color-text: #F0E6D2;

  --app-bg: url('assets/scales/dark_cutthroat.png');
}

/* Cuttbow Trout */
[data-theme="cuttbow"] {
  --page-bg: #F4EFE6;
  --color-primary: #4A5D23;
  --color-accent: #FF6347;
  --bg-overlay: rgba(244, 239, 230, 0.95);
  --color-surface: rgba(255, 255, 255, 0.75);
  --color-text: #2C2A29;
  
  --app-bg: url('assets/scales/light_cuttbow.png');
}

html.dark[data-theme="cuttbow"] {
  --page-bg: #1B2E15;
  --color-primary: #8CA05E;
  --color-accent: #FF7F50;
  --bg-overlay: rgba(20, 15, 15, 0.95);
  --color-surface: rgba(40, 25, 25, 0.75);
  --color-text: #F4EFE6;

  --app-bg: url('assets/scales/dark_cuttbow.png');
}

/* Wet Hands Usability */
body {
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior-y: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.wet-target { min-height: 64px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Camera Scan Animation */
@keyframes scan {
    0% { top: 0%; }
    100% { top: 100%; }
}
.animate-scan {
    animation: scan 1.5s ease-in-out infinite alternate;
}

/* Layout Force Overrides */
body.layout-mobile #app-root {
    flex-direction: column !important;
    max-width: 28rem !important; 
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
}
body.layout-mobile nav {
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 5rem !important;
    flex-direction: row !important;
    padding: 0 0.5rem !important;
    border-right: none !important;
    border-top: 1px solid rgba(212,175,55,0.2) !important;
}
body.layout-mobile nav .nav-btn {
    flex: 1 1 0% !important;
}
body.layout-mobile #view-planner {
    flex-direction: column !important;
    padding: 1.25rem !important;
}
body.layout-mobile #view-planner > div {
    width: 100% !important;
}

body.layout-desktop #app-root {
    flex-direction: row !important;
    max-width: 72rem !important; 
    border-radius: 2rem !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}
body.layout-desktop nav {
    position: static !important;
    width: 7rem !important;
    height: 100% !important;
    flex-direction: column !important;
    padding: 2.5rem 0 !important;
    border-right: 1px solid rgba(212,175,55,0.2) !important;
    border-top: none !important;
}
body.layout-desktop nav .nav-btn {
    flex: none !important;
    width: 100% !important;
}
body.layout-desktop #view-planner {
    flex-direction: row !important;
    padding: 2.5rem !important;
    gap: 2rem !important;
}
body.layout-desktop #view-planner > div {
    flex: 1 !important;
    max-width: 50% !important;
}

option {
    background-color: var(--page-bg);
    color: var(--color-text);
}

nav .nav-btn {
    position: relative;
}
nav .nav-btn.is-active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 100%);
}

@media (min-width: 768px) {
    body:not(.layout-mobile) nav .nav-btn.is-active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background-color: var(--color-primary);
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}
@media (max-width: 767px) {
    body:not(.layout-desktop) nav .nav-btn.is-active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 20%;
        right: 20%;
        height: 4px;
        background-color: var(--color-primary);
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}

/* Glass Pane Emulation */
.glass-pane {
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.15);
    border-top: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.glass-pane-dark {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.05);
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Hide Bug Cam on Desktop */
@media (min-width: 768px) {
    body:not(.layout-mobile) nav button[data-target="view-camera"] {
        display: none !important;
    }
}
body.layout-desktop nav button[data-target="view-camera"] {
    display: none !important;
}