/* ========================================
   PROJECT TRACKER STYLES
   Full DAW-style project management interface
   with 144-color scheme grid system
   ======================================== */

/* ========================================
   COLOR SCHEME VARIABLES (144 total)
   Each theme defines 8 semantic colors
   ======================================== */

/* Default theme - Use global theme variables */
:root {
  --pt-primary: var(--theme-primary, #007AE6);
  --pt-secondary: var(--theme-secondary, #3399FF);
  --pt-accent: var(--theme-accent, #66B3FF);
  --pt-background: var(--theme-background, #DDEBFF);
  --pt-surface: var(--theme-surface, #FFFFFF);
  --pt-text: var(--theme-text, #00111A);
  --pt-text-secondary: var(--theme-text-secondary, #002F4A);
  --pt-border: var(--theme-border, #99CCFF);
}

/* Red Row */
[data-theme="red-dark-muted"] {
  --pt-primary: #8B4049; --pt-secondary: #A65959; --pt-accent: #C97676;
  --pt-background: #2B1F21; --pt-surface: #3F2D2F; --pt-text: #E8D5D7;
  --pt-text-secondary: #B89A9D; --pt-border: #5A3F42;
}
[data-theme="red-medium-muted"] {
  --pt-primary: #A65959; --pt-secondary: #C97676; --pt-accent: #E89999;
  --pt-background: #3F2D2F; --pt-surface: #5A3F42; --pt-text: #F5EDED;
  --pt-text-secondary: #D4BABB; --pt-border: #8B4049;
}
[data-theme="red-light-muted"] {
  --pt-primary: #C97676; --pt-secondary: #E89999; --pt-accent: #8B4049;
  --pt-background: #F5EDED; --pt-surface: #FFFFFF; --pt-text: #2B1F21;
  --pt-text-secondary: #5A3F42; --pt-border: #D4BABB;
}
[data-theme="red-dark-balanced"] {
  --pt-primary: #B83232; --pt-secondary: #D44D4D; --pt-accent: #FF6B6B;
  --pt-background: #1A0F0F; --pt-surface: #2B1818; --pt-text: #FFE8E8;
  --pt-text-secondary: #D4A5A5; --pt-border: #5A2828;
}
[data-theme="red-medium-balanced"] {
  --pt-primary: #D44D4D; --pt-secondary: #FF6B6B; --pt-accent: #FF9999;
  --pt-background: #2B1818; --pt-surface: #4A2828; --pt-text: #FFF5F5;
  --pt-text-secondary: #FFCCCC; --pt-border: #8B3E3E;
}
[data-theme="red-light-balanced"] {
  --pt-primary: #FF6B6B; --pt-secondary: #FF9999; --pt-accent: #D44D4D;
  --pt-background: #FFF5F5; --pt-surface: #FFFFFF; --pt-text: #1A0F0F;
  --pt-text-secondary: #4A2828; --pt-border: #FFCCCC;
}
[data-theme="red-dark-vivid"] {
  --pt-primary: #CC0000; --pt-secondary: #FF1A1A; --pt-accent: #FF4444;
  --pt-background: #1A0000; --pt-surface: #330000; --pt-text: #FFCCCC;
  --pt-text-secondary: #FF9999; --pt-border: #660000;
}
[data-theme="red-medium-vivid"] {
  --pt-primary: #FF1A1A; --pt-secondary: #FF4444; --pt-accent: #FF6666;
  --pt-background: #330000; --pt-surface: #5A0000; --pt-text: #FFEEEE;
  --pt-text-secondary: #FFDDDD; --pt-border: #990000;
}
[data-theme="red-light-vivid"] {
  --pt-primary: #FF4444; --pt-secondary: #FF6666; --pt-accent: #FF1A1A;
  --pt-background: #FFEEEE; --pt-surface: #FFF8F8; --pt-text: #1A0000;
  --pt-text-secondary: #5A0000; --pt-border: #FFDDDD;
}
[data-theme="red-dark-neon"] {
  --pt-primary: #FF0033; --pt-secondary: #FF3355; --pt-accent: #FF6688;
  --pt-background: #0D0005; --pt-surface: #1A000A; --pt-text: #FFCCDD;
  --pt-text-secondary: #FF99BB; --pt-border: #5A0022;
}
[data-theme="red-medium-neon"] {
  --pt-primary: #FF3355; --pt-secondary: #FF6688; --pt-accent: #FF99BB;
  --pt-background: #1A000A; --pt-surface: #330015; --pt-text: #FFEEFF;
  --pt-text-secondary: #FFDDEE; --pt-border: #880033;
}
[data-theme="red-light-neon"] {
  --pt-primary: #FF6688; --pt-secondary: #FF99BB; --pt-accent: #FF3355;
  --pt-background: #FFEEFF; --pt-surface: #FFF5F8; --pt-text: #0D0005;
  --pt-text-secondary: #330015; --pt-border: #FFDDEE;
}

/* Orange Row */
[data-theme="orange-dark-muted"] {
  --pt-primary: #8B5E3C; --pt-secondary: #A67952; --pt-accent: #C9966B;
  --pt-background: #2B2318; --pt-surface: #3F3426; --pt-text: #E8DDCE;
  --pt-text-secondary: #B8A690; --pt-border: #5A4A3A;
}
[data-theme="orange-medium-muted"] {
  --pt-primary: #A67952; --pt-secondary: #C9966B; --pt-accent: #E8B68A;
  --pt-background: #3F3426; --pt-surface: #5A4A3A; --pt-text: #F5EDE5;
  --pt-text-secondary: #D4C4B3; --pt-border: #8B5E3C;
}
[data-theme="orange-light-muted"] {
  --pt-primary: #C9966B; --pt-secondary: #E8B68A; --pt-accent: #8B5E3C;
  --pt-background: #F5EDE5; --pt-surface: #FFFFFF; --pt-text: #2B2318;
  --pt-text-secondary: #5A4A3A; --pt-border: #D4C4B3;
}
[data-theme="orange-dark-balanced"] {
  --pt-primary: #CC6600; --pt-secondary: #E67A00; --pt-accent: #FF9933;
  --pt-background: #1A1100; --pt-surface: #2B1B00; --pt-text: #FFE6CC;
  --pt-text-secondary: #D4A366; --pt-border: #5A3300;
}
[data-theme="orange-medium-balanced"] {
  --pt-primary: #E67A00; --pt-secondary: #FF9933; --pt-accent: #FFB366;
  --pt-background: #2B1B00; --pt-surface: #4A2F00; --pt-text: #FFF0DD;
  --pt-text-secondary: #FFCC99; --pt-border: #8B4D00;
}
[data-theme="orange-light-balanced"] {
  --pt-primary: #FF9933; --pt-secondary: #FFB366; --pt-accent: #E67A00;
  --pt-background: #FFF0DD; --pt-surface: #FFFFFF; --pt-text: #1A1100;
  --pt-text-secondary: #4A2F00; --pt-border: #FFCC99;
}
[data-theme="orange-dark-vivid"] {
  --pt-primary: #FF6600; --pt-secondary: #FF8033; --pt-accent: #FFA366;
  --pt-background: #1A0800; --pt-surface: #331100; --pt-text: #FFD9B3;
  --pt-text-secondary: #FFC299; --pt-border: #662900;
}
[data-theme="orange-medium-vivid"] {
  --pt-primary: #FF8033; --pt-secondary: #FFA366; --pt-accent: #FFC299;
  --pt-background: #331100; --pt-surface: #5A1E00; --pt-text: #FFEBDD;
  --pt-text-secondary: #FFE0CC; --pt-border: #993D00;
}
[data-theme="orange-light-vivid"] {
  --pt-primary: #FFA366; --pt-secondary: #FFC299; --pt-accent: #FF8033;
  --pt-background: #FFEBDD; --pt-surface: #FFF5EE; --pt-text: #1A0800;
  --pt-text-secondary: #5A1E00; --pt-border: #FFE0CC;
}
[data-theme="orange-dark-neon"] {
  --pt-primary: #FF5500; --pt-secondary: #FF7733; --pt-accent: #FFA366;
  --pt-background: #0D0300; --pt-surface: #1A0600; --pt-text: #FFD9B3;
  --pt-text-secondary: #FFC299; --pt-border: #5A1E00;
}
[data-theme="orange-medium-neon"] {
  --pt-primary: #FF7733; --pt-secondary: #FFA366; --pt-accent: #FFCC99;
  --pt-background: #1A0600; --pt-surface: #330C00; --pt-text: #FFEBDD;
  --pt-text-secondary: #FFE0CC; --pt-border: #882900;
}
[data-theme="orange-light-neon"] {
  --pt-primary: #FFA366; --pt-secondary: #FFCC99; --pt-accent: #FF7733;
  --pt-background: #FFEBDD; --pt-surface: #FFF8F0; --pt-text: #0D0300;
  --pt-text-secondary: #330C00; --pt-border: #FFE0CC;
}

/* Yellow Row */
[data-theme="yellow-dark-muted"] {
  --pt-primary: #8B8440; --pt-secondary: #A69E59; --pt-accent: #C9BD76;
  --pt-background: #2B2A1F; --pt-surface: #3F3D2D; --pt-text: #E8E6D5;
  --pt-text-secondary: #B8B39A; --pt-border: #5A573F;
}
[data-theme="yellow-medium-muted"] {
  --pt-primary: #A69E59; --pt-secondary: #C9BD76; --pt-accent: #E8DD99;
  --pt-background: #3F3D2D; --pt-surface: #5A573F; --pt-text: #F5F3ED;
  --pt-text-secondary: #D4CEC0; --pt-border: #8B8440;
}
[data-theme="yellow-light-muted"] {
  --pt-primary: #C9BD76; --pt-secondary: #E8DD99; --pt-accent: #8B8440;
  --pt-background: #F5F3ED; --pt-surface: #FFFFFF; --pt-text: #2B2A1F;
  --pt-text-secondary: #5A573F; --pt-border: #D4CEC0;
}
[data-theme="yellow-dark-balanced"] {
  --pt-primary: #CCAA00; --pt-secondary: #E6C300; --pt-accent: #FFDD33;
  --pt-background: #1A1600; --pt-surface: #2B2400; --pt-text: #FFF4CC;
  --pt-text-secondary: #D4BF66; --pt-border: #5A4700;
}
[data-theme="yellow-medium-balanced"] {
  --pt-primary: #E6C300; --pt-secondary: #FFDD33; --pt-accent: #FFEE66;
  --pt-background: #2B2400; --pt-surface: #4A3D00; --pt-text: #FFFADD;
  --pt-text-secondary: #FFF199; --pt-border: #8B6E00;
}
[data-theme="yellow-light-balanced"] {
  --pt-primary: #FFDD33; --pt-secondary: #FFEE66; --pt-accent: #E6C300;
  --pt-background: #FFFADD; --pt-surface: #FFFFFF; --pt-text: #1A1600;
  --pt-text-secondary: #4A3D00; --pt-border: #FFF199;
}
[data-theme="yellow-dark-vivid"] {
  --pt-primary: #FFCC00; --pt-secondary: #FFDD33; --pt-accent: #FFEE66;
  --pt-background: #1A1400; --pt-surface: #332800; --pt-text: #FFF4B3;
  --pt-text-secondary: #FFEE99; --pt-border: #664F00;
}
[data-theme="yellow-medium-vivid"] {
  --pt-primary: #FFDD33; --pt-secondary: #FFEE66; --pt-accent: #FFF799;
  --pt-background: #332800; --pt-surface: #5A4700; --pt-text: #FFFBDD;
  --pt-text-secondary: #FFF9CC; --pt-border: #997500;
}
[data-theme="yellow-light-vivid"] {
  --pt-primary: #FFEE66; --pt-secondary: #FFF799; --pt-accent: #FFDD33;
  --pt-background: #FFFBDD; --pt-surface: #FFFEF0; --pt-text: #1A1400;
  --pt-text-secondary: #5A4700; --pt-border: #FFF9CC;
}
[data-theme="yellow-dark-neon"] {
  --pt-primary: #FFEE00; --pt-secondary: #FFF533; --pt-accent: #FFFA66;
  --pt-background: #0D0C00; --pt-surface: #1A1800; --pt-text: #FFFCB3;
  --pt-text-secondary: #FFFA99; --pt-border: #5A5200;
}
[data-theme="yellow-medium-neon"] {
  --pt-primary: #FFF533; --pt-secondary: #FFFA66; --pt-accent: #FFFC99;
  --pt-background: #1A1800; --pt-surface: #333000; --pt-text: #FFFFDD;
  --pt-text-secondary: #FFFECC; --pt-border: #887A00;
}
[data-theme="yellow-light-neon"] {
  --pt-primary: #FFFA66; --pt-secondary: #FFFC99; --pt-accent: #FFF533;
  --pt-background: #FFFFDD; --pt-surface: #FFFFFA; --pt-text: #0D0C00;
  --pt-text-secondary: #333000; --pt-border: #FFFECC;
}

/* Lime Row */
[data-theme="lime-dark-muted"] {
  --pt-primary: #6B8B40; --pt-secondary: #7FA659; --pt-accent: #9CC976;
  --pt-background: #212B1F; --pt-surface: #2F3F2D; --pt-text: #D9E8D5;
  --pt-text-secondary: #A3B89A; --pt-border: #3F5A3F;
}
[data-theme="lime-medium-muted"] {
  --pt-primary: #7FA659; --pt-secondary: #9CC976; --pt-accent: #BCE899;
  --pt-background: #2F3F2D; --pt-surface: #3F5A3F; --pt-text: #E8F5ED;
  --pt-text-secondary: #BFD4C0; --pt-border: #6B8B40;
}
[data-theme="lime-light-muted"] {
  --pt-primary: #9CC976; --pt-secondary: #BCE899; --pt-accent: #6B8B40;
  --pt-background: #E8F5ED; --pt-surface: #FFFFFF; --pt-text: #212B1F;
  --pt-text-secondary: #3F5A3F; --pt-border: #BFD4C0;
}
[data-theme="lime-dark-balanced"] {
  --pt-primary: #88CC00; --pt-secondary: #9FE600; --pt-accent: #B8FF33;
  --pt-background: #111A00; --pt-surface: #1E2B00; --pt-text: #E0FFCC;
  --pt-text-secondary: #B3D466; --pt-border: #335A00;
}
[data-theme="lime-medium-balanced"] {
  --pt-primary: #9FE600; --pt-secondary: #B8FF33; --pt-accent: #CCFF66;
  --pt-background: #1E2B00; --pt-surface: #2F4A00; --pt-text: #F0FFDD;
  --pt-text-secondary: #D9FF99; --pt-border: #668B00;
}
[data-theme="lime-light-balanced"] {
  --pt-primary: #B8FF33; --pt-secondary: #CCFF66; --pt-accent: #9FE600;
  --pt-background: #F0FFDD; --pt-surface: #FFFFFF; --pt-text: #111A00;
  --pt-text-secondary: #2F4A00; --pt-border: #D9FF99;
}
[data-theme="lime-dark-vivid"] {
  --pt-primary: #99FF00; --pt-secondary: #AAFF33; --pt-accent: #CCFF66;
  --pt-background: #0F1A00; --pt-surface: #1E3300; --pt-text: #DFFFB3;
  --pt-text-secondary: #CCFF99; --pt-border: #3D6600;
}
[data-theme="lime-medium-vivid"] {
  --pt-primary: #AAFF33; --pt-secondary: #CCFF66; --pt-accent: #DDFF99;
  --pt-background: #1E3300; --pt-surface: #335A00; --pt-text: #EFFFDD;
  --pt-text-secondary: #E6FFCC; --pt-border: #5A9900;
}
[data-theme="lime-light-vivid"] {
  --pt-primary: #CCFF66; --pt-secondary: #DDFF99; --pt-accent: #AAFF33;
  --pt-background: #EFFFDD; --pt-surface: #F8FFF0; --pt-text: #0F1A00;
  --pt-text-secondary: #335A00; --pt-border: #E6FFCC;
}
[data-theme="lime-dark-neon"] {
  --pt-primary: #AAFF00; --pt-secondary: #BBFF33; --pt-accent: #DDFF66;
  --pt-background: #0A0D00; --pt-surface: #141A00; --pt-text: #EFFFB3;
  --pt-text-secondary: #DDFF99; --pt-border: #3D5A00;
}
[data-theme="lime-medium-neon"] {
  --pt-primary: #BBFF33; --pt-secondary: #DDFF66; --pt-accent: #EEFF99;
  --pt-background: #141A00; --pt-surface: #243300; --pt-text: #F8FFDD;
  --pt-text-secondary: #F0FFCC; --pt-border: #668800;
}
[data-theme="lime-light-neon"] {
  --pt-primary: #DDFF66; --pt-secondary: #EEFF99; --pt-accent: #BBFF33;
  --pt-background: #F8FFDD; --pt-surface: #FDFFEF; --pt-text: #0A0D00;
  --pt-text-secondary: #243300; --pt-border: #F0FFCC;
}

/* Green Row */
[data-theme="green-dark-muted"] {
  --pt-primary: #408B5E; --pt-secondary: #59A679; --pt-accent: #76C996;
  --pt-background: #1F2B23; --pt-surface: #2D3F34; --pt-text: #D5E8DD;
  --pt-text-secondary: #9AB8A6; --pt-border: #3F5A4A;
}
[data-theme="green-medium-muted"] {
  --pt-primary: #59A679; --pt-secondary: #76C996; --pt-accent: #99E8BD;
  --pt-background: #2D3F34; --pt-surface: #3F5A4A; --pt-text: #EDF5F0;
  --pt-text-secondary: #C0D4C9; --pt-border: #408B5E;
}
[data-theme="green-light-muted"] {
  --pt-primary: #76C996; --pt-secondary: #99E8BD; --pt-accent: #408B5E;
  --pt-background: #EDF5F0; --pt-surface: #FFFFFF; --pt-text: #1F2B23;
  --pt-text-secondary: #3F5A4A; --pt-border: #C0D4C9;
}
[data-theme="green-dark-balanced"] {
  --pt-primary: #00AA55; --pt-secondary: #00CC66; --pt-accent: #33FF88;
  --pt-background: #001A0F; --pt-surface: #002B1A; --pt-text: #CCFFE6;
  --pt-text-secondary: #66D4A3; --pt-border: #005A33;
}
[data-theme="green-medium-balanced"] {
  --pt-primary: #00CC66; --pt-secondary: #33FF88; --pt-accent: #66FFAA;
  --pt-background: #002B1A; --pt-surface: #004A2F; --pt-text: #DDFFEE;
  --pt-text-secondary: #99FFD9; --pt-border: #008B4D;
}
[data-theme="green-light-balanced"] {
  --pt-primary: #33FF88; --pt-secondary: #66FFAA; --pt-accent: #00CC66;
  --pt-background: #DDFFEE; --pt-surface: #FFFFFF; --pt-text: #001A0F;
  --pt-text-secondary: #004A2F; --pt-border: #99FFD9;
}
[data-theme="green-dark-vivid"] {
  --pt-primary: #00DD66; --pt-secondary: #00FF77; --pt-accent: #33FF99;
  --pt-background: #001A0D; --pt-surface: #00331A; --pt-text: #B3FFD9;
  --pt-text-secondary: #99FFCC; --pt-border: #006633;
}
[data-theme="green-medium-vivid"] {
  --pt-primary: #00FF77; --pt-secondary: #33FF99; --pt-accent: #66FFBB;
  --pt-background: #00331A; --pt-surface: #005A2F; --pt-text: #DDFFEE;
  --pt-text-secondary: #CCFFE6; --pt-border: #009950;
}
[data-theme="green-light-vivid"] {
  --pt-primary: #33FF99; --pt-secondary: #66FFBB; --pt-accent: #00FF77;
  --pt-background: #DDFFEE; --pt-surface: #F0FFF8; --pt-text: #001A0D;
  --pt-text-secondary: #005A2F; --pt-border: #CCFFE6;
}
[data-theme="green-dark-neon"] {
  --pt-primary: #00FF66; --pt-secondary: #33FF88; --pt-accent: #66FFAA;
  --pt-background: #000D05; --pt-surface: #001A0A; --pt-text: #B3FFDD;
  --pt-text-secondary: #99FFCC; --pt-border: #005A22;
}
[data-theme="green-medium-neon"] {
  --pt-primary: #33FF88; --pt-secondary: #66FFAA; --pt-accent: #99FFCC;
  --pt-background: #001A0A; --pt-surface: #003315; --pt-text: #EEFFF8;
  --pt-text-secondary: #DDFFEE; --pt-border: #008833;
}
[data-theme="green-light-neon"] {
  --pt-primary: #66FFAA; --pt-secondary: #99FFCC; --pt-accent: #33FF88;
  --pt-background: #EEFFF8; --pt-surface: #F5FFFA; --pt-text: #000D05;
  --pt-text-secondary: #003315; --pt-border: #DDFFEE;
}

/* Teal Row */
[data-theme="teal-dark-muted"] {
  --pt-primary: #408B7A; --pt-secondary: #59A693; --pt-accent: #76C9B3;
  --pt-background: #1F2B28; --pt-surface: #2D3F3B; --pt-text: #D5E8E4;
  --pt-text-secondary: #9AB8AF; --pt-border: #3F5A52;
}
[data-theme="teal-medium-muted"] {
  --pt-primary: #59A693; --pt-secondary: #76C9B3; --pt-accent: #99E8D3;
  --pt-background: #2D3F3B; --pt-surface: #3F5A52; --pt-text: #EDF5F3;
  --pt-text-secondary: #C0D4CD; --pt-border: #408B7A;
}
[data-theme="teal-light-muted"] {
  --pt-primary: #76C9B3; --pt-secondary: #99E8D3; --pt-accent: #408B7A;
  --pt-background: #EDF5F3; --pt-surface: #FFFFFF; --pt-text: #1F2B28;
  --pt-text-secondary: #3F5A52; --pt-border: #C0D4CD;
}
[data-theme="teal-dark-balanced"] {
  --pt-primary: #00AA99; --pt-secondary: #00CCB3; --pt-accent: #33FFDD;
  --pt-background: #001A17; --pt-surface: #002B26; --pt-text: #CCFFF7;
  --pt-text-secondary: #66D4C4; --pt-border: #005A4F;
}
[data-theme="teal-medium-balanced"] {
  --pt-primary: #00CCB3; --pt-secondary: #33FFDD; --pt-accent: #66FFEE;
  --pt-background: #002B26; --pt-surface: #004A40; --pt-text: #DDFFF9;
  --pt-text-secondary: #99FFEE; --pt-border: #008B7A;
}
[data-theme="teal-light-balanced"] {
  --pt-primary: #33FFDD; --pt-secondary: #66FFEE; --pt-accent: #00CCB3;
  --pt-background: #DDFFF9; --pt-surface: #FFFFFF; --pt-text: #001A17;
  --pt-text-secondary: #004A40; --pt-border: #99FFEE;
}
[data-theme="teal-dark-vivid"] {
  --pt-primary: #00DDBB; --pt-secondary: #00FFCC; --pt-accent: #33FFDD;
  --pt-background: #001A14; --pt-surface: #003329; --pt-text: #B3FFEE;
  --pt-text-secondary: #99FFE6; --pt-border: #00664F;
}
[data-theme="teal-medium-vivid"] {
  --pt-primary: #00FFCC; --pt-secondary: #33FFDD; --pt-accent: #66FFEE;
  --pt-background: #003329; --pt-surface: #005A47; --pt-text: #DDFFFA;
  --pt-text-secondary: #CCFFF7; --pt-border: #00997A;
}
[data-theme="teal-light-vivid"] {
  --pt-primary: #33FFDD; --pt-secondary: #66FFEE; --pt-accent: #00FFCC;
  --pt-background: #DDFFFA; --pt-surface: #F0FFFD; --pt-text: #001A14;
  --pt-text-secondary: #005A47; --pt-border: #CCFFF7;
}
[data-theme="teal-dark-neon"] {
  --pt-primary: #00FFBB; --pt-secondary: #33FFCC; --pt-accent: #66FFDD;
  --pt-background: #000D0A; --pt-surface: #001A14; --pt-text: #B3FFF0;
  --pt-text-secondary: #99FFE6; --pt-border: #005A40;
}
[data-theme="teal-medium-neon"] {
  --pt-primary: #33FFCC; --pt-secondary: #66FFDD; --pt-accent: #99FFEE;
  --pt-background: #001A14; --pt-surface: #003328; --pt-text: #EEFFFC;
  --pt-text-secondary: #DDFFFA; --pt-border: #008866;
}
[data-theme="teal-light-neon"] {
  --pt-primary: #66FFDD; --pt-secondary: #99FFEE; --pt-accent: #33FFCC;
  --pt-background: #EEFFFC; --pt-surface: #F5FFFE; --pt-text: #000D0A;
  --pt-text-secondary: #003328; --pt-border: #DDFFFA;
}

/* Cyan Row */
[data-theme="cyan-dark-muted"] {
  --pt-primary: #40848B; --pt-secondary: #599EA6; --pt-accent: #76BDC9;
  --pt-background: #1F2A2B; --pt-surface: #2D3D3F; --pt-text: #D5E6E8;
  --pt-text-secondary: #9AB3B8; --pt-border: #3F575A;
}
[data-theme="cyan-medium-muted"] {
  --pt-primary: #599EA6; --pt-secondary: #76BDC9; --pt-accent: #99DDE8;
  --pt-background: #2D3D3F; --pt-surface: #3F575A; --pt-text: #EDF3F5;
  --pt-text-secondary: #C0CED4; --pt-border: #40848B;
}
[data-theme="cyan-light-muted"] {
  --pt-primary: #76BDC9; --pt-secondary: #99DDE8; --pt-accent: #40848B;
  --pt-background: #EDF3F5; --pt-surface: #FFFFFF; --pt-text: #1F2A2B;
  --pt-text-secondary: #3F575A; --pt-border: #C0CED4;
}
[data-theme="cyan-dark-balanced"] {
  --pt-primary: #0099AA; --pt-secondary: #00B3CC; --pt-accent: #33DDFF;
  --pt-background: #00171A; --pt-surface: #00262B; --pt-text: #CCF7FF;
  --pt-text-secondary: #66C4D4; --pt-border: #004F5A;
}
[data-theme="cyan-medium-balanced"] {
  --pt-primary: #00B3CC; --pt-secondary: #33DDFF; --pt-accent: #66EEFF;
  --pt-background: #00262B; --pt-surface: #00404A; --pt-text: #DDF9FF;
  --pt-text-secondary: #99EEFF; --pt-border: #007A8B;
}
[data-theme="cyan-light-balanced"] {
  --pt-primary: #33DDFF; --pt-secondary: #66EEFF; --pt-accent: #00B3CC;
  --pt-background: #DDF9FF; --pt-surface: #FFFFFF; --pt-text: #00171A;
  --pt-text-secondary: #00404A; --pt-border: #99EEFF;
}
[data-theme="cyan-dark-vivid"] {
  --pt-primary: #00BBDD; --pt-secondary: #00CCFF; --pt-accent: #33DDFF;
  --pt-background: #00141A; --pt-surface: #002933; --pt-text: #B3EEFF;
  --pt-text-secondary: #99E6FF; --pt-border: #004F66;
}
[data-theme="cyan-medium-vivid"] {
  --pt-primary: #00CCFF; --pt-secondary: #33DDFF; --pt-accent: #66EEFF;
  --pt-background: #002933; --pt-surface: #00475A; --pt-text: #DDFAFF;
  --pt-text-secondary: #CCF7FF; --pt-border: #007A99;
}
[data-theme="cyan-light-vivid"] {
  --pt-primary: #33DDFF; --pt-secondary: #66EEFF; --pt-accent: #00CCFF;
  --pt-background: #DDFAFF; --pt-surface: #F0FDFF; --pt-text: #00141A;
  --pt-text-secondary: #00475A; --pt-border: #CCF7FF;
}
[data-theme="cyan-dark-neon"] {
  --pt-primary: #00EEFF; --pt-secondary: #33F5FF; --pt-accent: #66FAFF;
  --pt-background: #000A0D; --pt-surface: #001419; --pt-text: #B3F9FF;
  --pt-text-secondary: #99F5FF; --pt-border: #004052;
}
[data-theme="cyan-medium-neon"] {
  --pt-primary: #33F5FF; --pt-secondary: #66FAFF; --pt-accent: #99FCFF;
  --pt-background: #001419; --pt-surface: #002833; --pt-text: #EEFCFF;
  --pt-text-secondary: #DDFAFF; --pt-border: #006688;
}
[data-theme="cyan-light-neon"] {
  --pt-primary: #66FAFF; --pt-secondary: #99FCFF; --pt-accent: #33F5FF;
  --pt-background: #EEFCFF; --pt-surface: #F5FEFF; --pt-text: #000A0D;
  --pt-text-secondary: #002833; --pt-border: #DDFAFF;
}

/* Blue Row */
[data-theme="blue-dark-muted"] {
  --pt-primary: #40608B; --pt-secondary: #5977A6; --pt-accent: #7693C9;
  --pt-background: #1F232B; --pt-surface: #2D343F; --pt-text: #D5DBE8;
  --pt-text-secondary: #9AA6B8; --pt-border: #3F475A;
}
[data-theme="blue-medium-muted"] {
  --pt-primary: #5977A6; --pt-secondary: #7693C9; --pt-accent: #99B4E8;
  --pt-background: #2D343F; --pt-surface: #3F475A; --pt-text: #EDF0F5;
  --pt-text-secondary: #C0C7D4; --pt-border: #40608B;
}
[data-theme="blue-light-muted"] {
  --pt-primary: #7693C9; --pt-secondary: #99B4E8; --pt-accent: #40608B;
  --pt-background: #EDF0F5; --pt-surface: #FFFFFF; --pt-text: #1F232B;
  --pt-text-secondary: #3F475A; --pt-border: #C0C7D4;
}
[data-theme="blue-dark-balanced"] {
  --pt-primary: #0066CC; --pt-secondary: #007AE6; --pt-accent: #3399FF;
  --pt-background: #00111A; --pt-surface: #001B2B; --pt-text: #CCE0FF;
  --pt-text-secondary: #66A3D4; --pt-border: #00335A;
}
[data-theme="blue-medium-balanced"] {
  --pt-primary: #007AE6; --pt-secondary: #3399FF; --pt-accent: #66B3FF;
  --pt-background: #001B2B; --pt-surface: #002F4A; --pt-text: #DDEBFF;
  --pt-text-secondary: #99CCFF; --pt-border: #004D8B;
}
[data-theme="blue-light-balanced"] {
  --pt-primary: #3399FF; --pt-secondary: #66B3FF; --pt-accent: #007AE6;
  --pt-background: #DDEBFF; --pt-surface: #FFFFFF; --pt-text: #00111A;
  --pt-text-secondary: #002F4A; --pt-border: #99CCFF;
}
[data-theme="blue-dark-vivid"] {
  --pt-primary: #0077FF; --pt-secondary: #0088FF; --pt-accent: #33AAFF;
  --pt-background: #000D1A; --pt-surface: #001A33; --pt-text: #B3D9FF;
  --pt-text-secondary: #99CCFF; --pt-border: #003366;
}
[data-theme="blue-medium-vivid"] {
  --pt-primary: #0088FF; --pt-secondary: #33AAFF; --pt-accent: #66BBFF;
  --pt-background: #001A33; --pt-surface: #002F5A; --pt-text: #DDEBFF;
  --pt-text-secondary: #CCE0FF; --pt-border: #004799;
}
[data-theme="blue-light-vivid"] {
  --pt-primary: #33AAFF; --pt-secondary: #66BBFF; --pt-accent: #0088FF;
  --pt-background: #DDEBFF; --pt-surface: #F0F5FF; --pt-text: #000D1A;
  --pt-text-secondary: #002F5A; --pt-border: #CCE0FF;
}
[data-theme="blue-dark-neon"] {
  --pt-primary: #0099FF; --pt-secondary: #33AAFF; --pt-accent: #66CCFF;
  --pt-background: #00050D; --pt-surface: #000A1A; --pt-text: #B3E0FF;
  --pt-text-secondary: #99CCFF; --pt-border: #002952;
}
[data-theme="blue-medium-neon"] {
  --pt-primary: #33AAFF; --pt-secondary: #66CCFF; --pt-accent: #99DDFF;
  --pt-background: #000A1A; --pt-surface: #001533; --pt-text: #EEFAFF;
  --pt-text-secondary: #DDEBFF; --pt-border: #004D88;
}
[data-theme="blue-light-neon"] {
  --pt-primary: #66CCFF; --pt-secondary: #99DDFF; --pt-accent: #33AAFF;
  --pt-background: #EEFAFF; --pt-surface: #F5FCFF; --pt-text: #00050D;
  --pt-text-secondary: #001533; --pt-border: #DDEBFF;
}

/* Purple Row */
[data-theme="purple-dark-muted"] {
  --pt-primary: #6B408B; --pt-secondary: #7F59A6; --pt-accent: #9C76C9;
  --pt-background: #211F2B; --pt-surface: #2F2D3F; --pt-text: #D9D5E8;
  --pt-text-secondary: #A39AB8; --pt-border: #473F5A;
}
[data-theme="purple-medium-muted"] {
  --pt-primary: #7F59A6; --pt-secondary: #9C76C9; --pt-accent: #BC99E8;
  --pt-background: #2F2D3F; --pt-surface: #473F5A; --pt-text: #E8EDF5;
  --pt-text-secondary: #BFC0D4; --pt-border: #6B408B;
}
[data-theme="purple-light-muted"] {
  --pt-primary: #9C76C9; --pt-secondary: #BC99E8; --pt-accent: #6B408B;
  --pt-background: #E8EDF5; --pt-surface: #FFFFFF; --pt-text: #211F2B;
  --pt-text-secondary: #473F5A; --pt-border: #BFC0D4;
}
[data-theme="purple-dark-balanced"] {
  --pt-primary: #7700CC; --pt-secondary: #8A00E6; --pt-accent: #AA33FF;
  --pt-background: #0F001A; --pt-surface: #1A002B; --pt-text: #E0CCFF;
  --pt-text-secondary: #A366D4; --pt-border: #33005A;
}
[data-theme="purple-medium-balanced"] {
  --pt-primary: #8A00E6; --pt-secondary: #AA33FF; --pt-accent: #CC66FF;
  --pt-background: #1A002B; --pt-surface: #2F004A; --pt-text: #EBDDFF;
  --pt-text-secondary: #CC99FF; --pt-border: #4D008B;
}
[data-theme="purple-light-balanced"] {
  --pt-primary: #AA33FF; --pt-secondary: #CC66FF; --pt-accent: #8A00E6;
  --pt-background: #EBDDFF; --pt-surface: #FFFFFF; --pt-text: #0F001A;
  --pt-text-secondary: #2F004A; --pt-border: #CC99FF;
}
[data-theme="purple-dark-vivid"] {
  --pt-primary: #8800FF; --pt-secondary: #9933FF; --pt-accent: #BB66FF;
  --pt-background: #0D001A; --pt-surface: #1A0033; --pt-text: #D9B3FF;
  --pt-text-secondary: #CC99FF; --pt-border: #330066;
}
[data-theme="purple-medium-vivid"] {
  --pt-primary: #9933FF; --pt-secondary: #BB66FF; --pt-accent: #DD99FF;
  --pt-background: #1A0033; --pt-surface: #2F005A; --pt-text: #EBDDFF;
  --pt-text-secondary: #E0CCFF; --pt-border: #470099;
}
[data-theme="purple-light-vivid"] {
  --pt-primary: #BB66FF; --pt-secondary: #DD99FF; --pt-accent: #9933FF;
  --pt-background: #EBDDFF; --pt-surface: #F5F0FF; --pt-text: #0D001A;
  --pt-text-secondary: #2F005A; --pt-border: #E0CCFF;
}
[data-theme="purple-dark-neon"] {
  --pt-primary: #AA00FF; --pt-secondary: #BB33FF; --pt-accent: #DD66FF;
  --pt-background: #05000D; --pt-surface: #0A001A; --pt-text: #E6B3FF;
  --pt-text-secondary: #CC99FF; --pt-border: #290052;
}
[data-theme="purple-medium-neon"] {
  --pt-primary: #BB33FF; --pt-secondary: #DD66FF; --pt-accent: #EE99FF;
  --pt-background: #0A001A; --pt-surface: #150033; --pt-text: #FAEEFF;
  --pt-text-secondary: #EBDDFF; --pt-border: #4D0088;
}
[data-theme="purple-light-neon"] {
  --pt-primary: #DD66FF; --pt-secondary: #EE99FF; --pt-accent: #BB33FF;
  --pt-background: #FAEEFF; --pt-surface: #FCF5FF; --pt-text: #05000D;
  --pt-text-secondary: #150033; --pt-border: #EBDDFF;
}

/* Magenta Row */
[data-theme="magenta-dark-muted"] {
  --pt-primary: #8B4077; --pt-secondary: #A6598F; --pt-accent: #C976AA;
  --pt-background: #2B1F26; --pt-surface: #3F2D37; --pt-text: #E8D5E0;
  --pt-text-secondary: #B89AAC; --pt-border: #5A3F4F;
}
[data-theme="magenta-medium-muted"] {
  --pt-primary: #A6598F; --pt-secondary: #C976AA; --pt-accent: #E899CC;
  --pt-background: #3F2D37; --pt-surface: #5A3F4F; --pt-text: #F5EDF2;
  --pt-text-secondary: #D4C0CC; --pt-border: #8B4077;
}
[data-theme="magenta-light-muted"] {
  --pt-primary: #C976AA; --pt-secondary: #E899CC; --pt-accent: #8B4077;
  --pt-background: #F5EDF2; --pt-surface: #FFFFFF; --pt-text: #2B1F26;
  --pt-text-secondary: #5A3F4F; --pt-border: #D4C0CC;
}
[data-theme="magenta-dark-balanced"] {
  --pt-primary: #CC0088; --pt-secondary: #E600A0; --pt-accent: #FF33BB;
  --pt-background: #1A0011; --pt-surface: #2B001B; --pt-text: #FFCCE8;
  --pt-text-secondary: #D466AA; --pt-border: #5A0033;
}
[data-theme="magenta-medium-balanced"] {
  --pt-primary: #E600A0; --pt-secondary: #FF33BB; --pt-accent: #FF66CC;
  --pt-background: #2B001B; --pt-surface: #4A002F; --pt-text: #FFDDF0;
  --pt-text-secondary: #FF99DD; --pt-border: #8B004D;
}
[data-theme="magenta-light-balanced"] {
  --pt-primary: #FF33BB; --pt-secondary: #FF66CC; --pt-accent: #E600A0;
  --pt-background: #FFDDF0; --pt-surface: #FFFFFF; --pt-text: #1A0011;
  --pt-text-secondary: #4A002F; --pt-border: #FF99DD;
}
[data-theme="magenta-dark-vivid"] {
  --pt-primary: #FF0099; --pt-secondary: #FF33AA; --pt-accent: #FF66CC;
  --pt-background: #1A000D; --pt-surface: #33001A; --pt-text: #FFB3E6;
  --pt-text-secondary: #FF99CC; --pt-border: #660033;
}
[data-theme="magenta-medium-vivid"] {
  --pt-primary: #FF33AA; --pt-secondary: #FF66CC; --pt-accent: #FF99DD;
  --pt-background: #33001A; --pt-surface: #5A002F; --pt-text: #FFDDF0;
  --pt-text-secondary: #FFCCEE; --pt-border: #99004D;
}
[data-theme="magenta-light-vivid"] {
  --pt-primary: #FF66CC; --pt-secondary: #FF99DD; --pt-accent: #FF33AA;
  --pt-background: #FFDDF0; --pt-surface: #FFF0F8; --pt-text: #1A000D;
  --pt-text-secondary: #5A002F; --pt-border: #FFCCEE;
}
[data-theme="magenta-dark-neon"] {
  --pt-primary: #FF00AA; --pt-secondary: #FF33BB; --pt-accent: #FF66DD;
  --pt-background: #0D0005; --pt-surface: #1A000A; --pt-text: #FFB3EE;
  --pt-text-secondary: #FF99CC; --pt-border: #5A0022;
}
[data-theme="magenta-medium-neon"] {
  --pt-primary: #FF33BB; --pt-secondary: #FF66DD; --pt-accent: #FF99EE;
  --pt-background: #1A000A; --pt-surface: #330015; --pt-text: #FFEEFA;
  --pt-text-secondary: #FFDDF0; --pt-border: #880033;
}
[data-theme="magenta-light-neon"] {
  --pt-primary: #FF66DD; --pt-secondary: #FF99EE; --pt-accent: #FF33BB;
  --pt-background: #FFEEFA; --pt-surface: #FFF5FC; --pt-text: #0D0005;
  --pt-text-secondary: #330015; --pt-border: #FFDDF0;
}

/* Pink Row */
[data-theme="pink-dark-muted"] {
  --pt-primary: #8B5065; --pt-secondary: #A66B7E; --pt-accent: #C9899C;
  --pt-background: #2B2023; --pt-surface: #3F2F34; --pt-text: #E8D8DD;
  --pt-text-secondary: #B8A1A9; --pt-border: #5A4249;
}
[data-theme="pink-medium-muted"] {
  --pt-primary: #A66B7E; --pt-secondary: #C9899C; --pt-accent: #E8AABF;
  --pt-background: #3F2F34; --pt-surface: #5A4249; --pt-text: #F5EEF0;
  --pt-text-secondary: #D4C2C7; --pt-border: #8B5065;
}
[data-theme="pink-light-muted"] {
  --pt-primary: #C9899C; --pt-secondary: #E8AABF; --pt-accent: #8B5065;
  --pt-background: #F5EEF0; --pt-surface: #FFFFFF; --pt-text: #2B2023;
  --pt-text-secondary: #5A4249; --pt-border: #D4C2C7;
}
[data-theme="pink-dark-balanced"] {
  --pt-primary: #CC5577; --pt-secondary: #E66691; --pt-accent: #FF88AA;
  --pt-background: #1A0A0F; --pt-surface: #2B1118; --pt-text: #FFD6E0;
  --pt-text-secondary: #D48099; --pt-border: #5A2233;
}
[data-theme="pink-medium-balanced"] {
  --pt-primary: #E66691; --pt-secondary: #FF88AA; --pt-accent: #FFAAC2;
  --pt-background: #2B1118; --pt-surface: #4A1D2F; --pt-text: #FFE6EE;
  --pt-text-secondary: #FFBBD4; --pt-border: #8B3355;
}
[data-theme="pink-light-balanced"] {
  --pt-primary: #FF88AA; --pt-secondary: #FFAAC2; --pt-accent: #E66691;
  --pt-background: #FFE6EE; --pt-surface: #FFFFFF; --pt-text: #1A0A0F;
  --pt-text-secondary: #4A1D2F; --pt-border: #FFBBD4;
}
[data-theme="pink-dark-vivid"] {
  --pt-primary: #FF4477; --pt-secondary: #FF6699; --pt-accent: #FF88BB;
  --pt-background: #1A0508; --pt-surface: #330A11; --pt-text: #FFCCE0;
  --pt-text-secondary: #FFB3CC; --pt-border: #660A22;
}
[data-theme="pink-medium-vivid"] {
  --pt-primary: #FF6699; --pt-secondary: #FF88BB; --pt-accent: #FFAADD;
  --pt-background: #330A11; --pt-surface: #5A111E; --pt-text: #FFE0EE;
  --pt-text-secondary: #FFD4E6; --pt-border: #990F33;
}
[data-theme="pink-light-vivid"] {
  --pt-primary: #FF88BB; --pt-secondary: #FFAADD; --pt-accent: #FF6699;
  --pt-background: #FFE0EE; --pt-surface: #FFF0F5; --pt-text: #1A0508;
  --pt-text-secondary: #5A111E; --pt-border: #FFD4E6;
}
[data-theme="pink-dark-neon"] {
  --pt-primary: #FF5599; --pt-secondary: #FF77AA; --pt-accent: #FF99CC;
  --pt-background: #0D0205; --pt-surface: #1A050A; --pt-text: #FFDDEE;
  --pt-text-secondary: #FFB3CC; --pt-border: #5A0818;
}
[data-theme="pink-medium-neon"] {
  --pt-primary: #FF77AA; --pt-secondary: #FF99CC; --pt-accent: #FFBBEE;
  --pt-background: #1A050A; --pt-surface: #330A15; --pt-text: #FFF0F8;
  --pt-text-secondary: #FFE0EE; --pt-border: #880C33;
}
[data-theme="pink-light-neon"] {
  --pt-primary: #FF99CC; --pt-secondary: #FFBBEE; --pt-accent: #FF77AA;
  --pt-background: #FFF0F8; --pt-surface: #FFF8FC; --pt-text: #0D0205;
  --pt-text-secondary: #330A15; --pt-border: #FFE0EE;
}

/* Slate Row */
[data-theme="slate-dark-muted"] {
  --pt-primary: #5A6670; --pt-secondary: #6E7D87; --pt-accent: #8799A3;
  --pt-background: #1C1F22; --pt-surface: #2A2F33; --pt-text: #D8DCE0;
  --pt-text-secondary: #A1A9B0; --pt-border: #424A52;
}
[data-theme="slate-medium-muted"] {
  --pt-primary: #6E7D87; --pt-secondary: #8799A3; --pt-accent: #A3B5BF;
  --pt-background: #2A2F33; --pt-surface: #424A52; --pt-text: #EEF0F2;
  --pt-text-secondary: #C2C7CC; --pt-border: #5A6670;
}
[data-theme="slate-light-muted"] {
  --pt-primary: #8799A3; --pt-secondary: #A3B5BF; --pt-accent: #5A6670;
  --pt-background: #EEF0F2; --pt-surface: #FFFFFF; --pt-text: #1C1F22;
  --pt-text-secondary: #424A52; --pt-border: #C2C7CC;
}
[data-theme="slate-dark-balanced"] {
  --pt-primary: #475569; --pt-secondary: #64748B; --pt-accent: #94A3B8;
  --pt-background: #0F172A; --pt-surface: #1E293B; --pt-text: #E2E8F0;
  --pt-text-secondary: #94A3B8; --pt-border: #334155;
}
[data-theme="slate-medium-balanced"] {
  --pt-primary: #64748B; --pt-secondary: #94A3B8; --pt-accent: #CBD5E1;
  --pt-background: #1E293B; --pt-surface: #334155; --pt-text: #F1F5F9;
  --pt-text-secondary: #CBD5E1; --pt-border: #475569;
}
[data-theme="slate-light-balanced"] {
  --pt-primary: #94A3B8; --pt-secondary: #CBD5E1; --pt-accent: #64748B;
  --pt-background: #F1F5F9; --pt-surface: #FFFFFF; --pt-text: #0F172A;
  --pt-text-secondary: #334155; --pt-border: #CBD5E1;
}
[data-theme="slate-dark-vivid"] {
  --pt-primary: #3B4858; --pt-secondary: #526376; --pt-accent: #708499;
  --pt-background: #0A0F17; --pt-surface: #151D29; --pt-text: #D1D9E3;
  --pt-text-secondary: #8B9AAB; --pt-border: #29394D;
}
[data-theme="slate-medium-vivid"] {
  --pt-primary: #526376; --pt-secondary: #708499; --pt-accent: #94A9BF;
  --pt-background: #151D29; --pt-surface: #29394D; --pt-text: #E8EDF3;
  --pt-text-secondary: #B8C5D4; --pt-border: #3B4858;
}
[data-theme="slate-light-vivid"] {
  --pt-primary: #708499; --pt-secondary: #94A9BF; --pt-accent: #526376;
  --pt-background: #E8EDF3; --pt-surface: #F5F8FA; --pt-text: #0A0F17;
  --pt-text-secondary: #29394D; --pt-border: #B8C5D4;
}
[data-theme="slate-dark-neon"] {
  --pt-primary: #556B7F; --pt-secondary: #6B8599; --pt-accent: #8BA3B8;
  --pt-background: #050709; --pt-surface: #0A0F14; --pt-text: #DDE5ED;
  --pt-text-secondary: #9BAEC2; --pt-border: #1F2B3A;
}
[data-theme="slate-medium-neon"] {
  --pt-primary: #6B8599; --pt-secondary: #8BA3B8; --pt-accent: #ABC4D6;
  --pt-background: #0A0F14; --pt-surface: #151E29; --pt-text: #F0F4F8;
  --pt-text-secondary: #CBD8E5; --pt-border: #334454;
}
[data-theme="slate-light-neon"] {
  --pt-primary: #8BA3B8; --pt-secondary: #ABC4D6; --pt-accent: #6B8599;
  --pt-background: #F0F4F8; --pt-surface: #F8FAFC; --pt-text: #050709;
  --pt-text-secondary: #151E29; --pt-border: #CBD8E5;
}

/* ========================================
   BASE LAYOUT
   ======================================== */

#projects-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background: var(--pt-background);
  color: var(--pt-text);
  min-height: 100vh;
}

#projects-app {
  max-width: 100%;
  margin: 0 auto;
}

/* ========================================
   PROJECT TRACKER NAVIGATION
   ======================================== */

.project-tracker-nav {
  background: var(--pt-surface);
  border-bottom: 2px solid var(--pt-border);
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
}

.nav-btn {
  padding: 8px 16px;
  border: 2px solid var(--pt-border);
  border-radius: 6px;
  background: var(--pt-surface);
  color: var(--pt-text);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}

.nav-btn:hover {
  background: var(--pt-background);
  border-color: var(--pt-primary);
  transform: translateY(-1px);
}

.nav-btn.active {
  background: linear-gradient(135deg, var(--pt-primary), var(--pt-secondary));
  color: var(--pt-surface);
  border-color: var(--pt-primary);
}

/* ========================================
   TEMPLATE BROWSER
   ======================================== */

.template-browser {
  padding: 20px;
}

.template-browser-header {
  margin-bottom: 24px;
}

.template-browser-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--pt-text);
}

.template-browser-header p {
  margin: 0;
  color: var(--pt-text-secondary);
  font-size: 14px;
}

/* Template Filters */
.template-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pt-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-select {
  padding: 8px 12px;
  border: 2px solid var(--pt-border);
  border-radius: 6px;
  background: var(--pt-surface);
  color: var(--pt-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-select:hover {
  border-color: var(--pt-primary);
}

.filter-select:focus {
  outline: none;
  border-color: var(--pt-primary);
  box-shadow: 0 0 0 3px rgba(0, 122, 230, 0.1);
}

/* Templates Grid */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.template-card {
  background: var(--pt-surface);
  border: 2px solid var(--pt-border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}

.template-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-color: var(--pt-primary);
}

.template-card-header {
  background: linear-gradient(135deg, var(--pt-primary), var(--pt-secondary));
  color: var(--pt-surface);
  padding: 16px;
  position: relative;
}

.template-card-header h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 700;
}

.template-category {
  font-size: 12px;
  opacity: 0.9;
  font-weight: 500;
}

.template-card-body {
  padding: 16px;
}

.template-description {
  margin: 0 0 16px 0;
  color: var(--pt-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.template-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.template-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.template-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--pt-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.template-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--pt-text);
}

.template-card-footer {
  padding-top: 16px;
  border-top: 1px solid var(--pt-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-use-template {
  padding: 8px 16px;
  background: var(--pt-primary);
  color: var(--pt-surface);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-use-template:hover {
  background: var(--pt-accent);
  transform: translateY(-1px);
}

.btn-preview-template {
  padding: 8px 16px;
  background: transparent;
  color: var(--pt-primary);
  border: 2px solid var(--pt-primary);
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-preview-template:hover {
  background: var(--pt-primary);
  color: var(--pt-surface);
}

/* ========================================
   PROJECT LIST VIEW
   ======================================== */

.projects-list {
  padding: 20px;
}

.projects-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.projects-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--pt-text);
}

.btn-new-project {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--pt-primary), var(--pt-secondary));
  color: var(--pt-surface);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-new-project:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 122, 230, 0.3);
}

/* Projects Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.project-card {
  background: var(--pt-surface);
  border: 2px solid var(--pt-border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-color: var(--pt-primary);
}

.project-card-header {
  background: linear-gradient(135deg, var(--pt-primary), var(--pt-secondary));
  color: var(--pt-surface);
  padding: 16px;
  position: relative;
}

.project-card-header h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 700;
}

.project-dates {
  font-size: 12px;
  opacity: 0.9;
  font-weight: 500;
}

.project-card-body {
  padding: 16px;
}

.project-progress {
  margin-bottom: 16px;
}

.project-progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pt-text-secondary);
}

.project-progress-bar {
  height: 8px;
  background: var(--pt-background);
  border-radius: 4px;
  overflow: hidden;
}

.project-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pt-primary), var(--pt-accent));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.project-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.project-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--pt-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--pt-text);
}

.project-card-footer {
  padding-top: 16px;
  border-top: 1px solid var(--pt-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-status-badge.planning {
  background: rgba(255, 193, 7, 0.2);
  color: #FFA000;
}

.project-status-badge.active {
  background: rgba(76, 175, 80, 0.2);
  color: #388E3C;
}

.project-status-badge.paused {
  background: rgba(158, 158, 158, 0.2);
  color: #616161;
}

.project-status-badge.completed {
  background: rgba(33, 150, 243, 0.2);
  color: #1976D2;
}

/* ========================================
   DAW-STYLE PROJECT VIEW
   ======================================== */

.project-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px - 50vh);
  background: var(--pt-background);
}

/* Project Header */
.project-view-header {
  background: var(--pt-surface);
  border-bottom: 2px solid var(--pt-border);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-title-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-back {
  padding: 8px 12px;
  background: transparent;
  border: 2px solid var(--pt-border);
  border-radius: 6px;
  color: var(--pt-text);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-back:hover {
  border-color: var(--pt-primary);
  color: var(--pt-primary);
}

.project-title-section h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--pt-text);
}

.project-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-save-project,
.btn-export-project,
.btn-share-project {
  padding: 8px 16px;
  background: var(--pt-primary);
  color: var(--pt-surface);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-save-project:hover,
.btn-export-project:hover,
.btn-share-project:hover {
  background: var(--pt-accent);
}

/* Timeline Container (DAW-style) */
.project-timeline-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Timeline Header (Ruler) */
.timeline-header {
  background: var(--pt-surface);
  border-bottom: 1px solid var(--pt-border);
  padding: 12px 20px 12px 240px; /* 240px offset for track labels */
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: auto;
}

.timeline-phase-header {
  overflow: visible;
  margin-bottom: 8px;
}

.timeline-phase-header-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-ruler {
  height: 40px;
  position: relative;
  background: var(--pt-background);
  border: 1px solid var(--pt-border);
  border-radius: 4px;
  min-width: 100%; /* Expand to fill available space */
}

.timeline-tick {
  position: absolute;
  top: 0;
  height: 100%;
  border-left: 1px solid var(--pt-border);
  color: var(--pt-text-secondary);
  font-size: 11px;
  padding-left: 4px;
  padding-top: 4px;
}

.timeline-tick.major {
  border-left-color: var(--pt-text-secondary);
  font-weight: 600;
}

/* Timeline Body (Tracks) */
.timeline-body {
  flex: 1;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Track List (Left sidebar) */
.track-list {
  width: 240px;
  background: var(--pt-surface);
  border-right: 2px solid var(--pt-border);
  overflow-y: auto;
}

/* Phase Section */
.phase-section {
  border-bottom: 1px solid var(--pt-border);
}

.phase-header {
  padding: 12px 16px;
  background: var(--pt-surface);
  border-bottom: 1px solid var(--pt-border);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s;
  min-height: 50px;
}

.phase-header:hover {
  background: var(--pt-background);
}

.phase-toggle {
  font-size: 10px;
  color: var(--pt-text-secondary);
  width: 16px;
  flex-shrink: 0;
}

.phase-name {
  font-weight: 600;
  color: var(--pt-text);
  font-size: 13px;
  flex-grow: 1;
  flex-shrink: 0; /* Don't shrink - prioritize full text */
  min-width: max-content; /* Ensure full text is visible */
}

.phase-progress-bar {
  display: none; /* Hide progress bar on left */
}

.phase-dates {
  font-size: 11px;
  color: var(--pt-text-secondary);
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 1; /* Allow dates to shrink if needed */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Editable Elements */
.editable {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background 0.2s;
}

.editable:hover {
  background: rgba(0, 0, 0, 0.05);
  text-decoration: underline;
}

/* Stage Headers */
.stage-section {
  padding-left: 24px;
}

.stage-header {
  padding: 8px 12px;
  background: var(--pt-background);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 12px;
}

.stage-header:hover {
  background: var(--pt-border);
}

.stage-toggle {
  font-size: 9px;
  color: var(--pt-text-secondary);
  width: 12px;
}

.stage-name {
  color: var(--pt-text);
  font-weight: 500;
  flex-grow: 1;
}

.stage-dates {
  font-size: 10px;
  color: var(--pt-text-secondary);
  white-space: nowrap;
}

.stage-status {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--pt-border);
  color: var(--pt-text-secondary);
}

.track-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--pt-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s;
}

/* Separate hover styles for track headers vs task headers */
.track-header:not(.task-header):hover {
  background: var(--pt-background);
}

.task-header:hover {
  background: rgba(0, 0, 0, 0.03);
}

.track-header.active {
  background: var(--pt-primary);
  color: var(--pt-surface);
}

.track-name {
  font-weight: 600;
  font-size: 14px;
}

.track-controls {
  display: flex;
  gap: 4px;
}

.btn-track-solo,
.btn-track-mute {
  width: 24px;
  height: 24px;
  border: 1px solid var(--pt-border);
  border-radius: 4px;
  background: transparent;
  color: var(--pt-text-secondary);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-track-solo:hover {
  background: #FFEB3B;
  color: #000;
  border-color: #FFEB3B;
}

.btn-track-solo.active {
  background: #FFC107;
  color: #000;
  border-color: #FFC107;
}

.btn-track-mute:hover {
  background: #F44336;
  color: #FFF;
  border-color: #F44336;
}

.btn-track-mute.active {
  background: #D32F2F;
  color: #FFF;
  border-color: #D32F2F;
}

/* Timeline Canvas (Right side) */
.timeline-canvas {
  flex: 1;
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
  background: var(--pt-background);
  min-width: 0; /* Allow flex item to shrink below content size */
}

.timeline-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.timeline-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
}

.timeline-grid-line.month-divider {
  border-left: 2px solid rgba(0, 0, 0, 0.2) !important;
  z-index: 2;
}

.timeline-grid-line.week-divider {
  border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
  z-index: 1;
}

/* Task Blocks on Timeline */
.timeline-track {
  position: relative;
  height: 60px;
  border-bottom: 1px solid var(--pt-border);
}

.timeline-task {
  position: absolute;
  top: 8px;
  height: 44px;
  background: linear-gradient(135deg, var(--pt-primary), var(--pt-secondary));
  border: 2px solid var(--pt-primary);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: move;
  transition: all 0.2s;
  overflow: hidden;
  color: var(--pt-surface);
}

.timeline-task:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.timeline-task.selected {
  border-color: var(--pt-accent);
  box-shadow: 0 0 0 3px rgba(0, 122, 230, 0.3);
  z-index: 11;
}

.timeline-task-title {
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-task-duration {
  font-size: 10px;
  opacity: 0.8;
}

/* Task Resize Handles */
.timeline-task-resize-left,
.timeline-task-resize-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  opacity: 0;
  transition: opacity 0.2s;
}

.timeline-task-resize-left {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.5), transparent);
}

.timeline-task-resize-right {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.5), transparent);
}

.timeline-task:hover .timeline-task-resize-left,
.timeline-task:hover .timeline-task-resize-right {
  opacity: 1;
}

/* Milestone Markers */
.milestone-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

.milestone-line {
  width: 2px;
  height: 100%;
  background: var(--pt-accent);
  opacity: 0.7;
}

.milestone-label {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pt-accent);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.milestone-date {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pt-background);
  color: var(--pt-text-secondary);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  white-space: nowrap;
  pointer-events: auto;
  border: 1px solid var(--pt-border);
}

/* ========================================
   TASK DETAIL PANEL (Right Sidebar)
   ======================================== */

.task-detail-panel {
  width: 320px;
  background: var(--pt-surface);
  border-left: 2px solid var(--pt-border);
  overflow-y: auto;
  padding: 20px;
}

.task-detail-panel h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--pt-text);
}

.task-field {
  margin-bottom: 20px;
}

.task-field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pt-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.task-field-input,
.task-field-textarea,
.task-field-select {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid var(--pt-border);
  border-radius: 6px;
  background: var(--pt-background);
  color: var(--pt-text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s;
}

.task-field-input:focus,
.task-field-textarea:focus,
.task-field-select:focus {
  outline: none;
  border-color: var(--pt-primary);
  box-shadow: 0 0 0 3px rgba(0, 122, 230, 0.1);
}

.task-field-textarea {
  min-height: 80px;
  resize: vertical;
}

.btn-delete-task {
  width: 100%;
  padding: 10px;
  background: #F44336;
  color: #FFF;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-delete-task:hover {
  background: #D32F2F;
}

/* ========================================
   LOADING STATES
   ======================================== */

.loading-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--pt-text-secondary);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--pt-border);
  border-top-color: var(--pt-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   MODALS
   ======================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  background: var(--pt-surface);
  border: 2px solid var(--pt-border);
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.2s;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  padding: 20px;
  border-bottom: 2px solid var(--pt-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--pt-text);
}

.btn-close-modal {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--pt-text-secondary);
  font-size: 24px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}

.btn-close-modal:hover {
  background: var(--pt-background);
  color: var(--pt-text);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  border-top: 2px solid var(--pt-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn-modal-cancel,
.btn-modal-confirm {
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-modal-cancel {
  background: transparent;
  border: 2px solid var(--pt-border);
  color: var(--pt-text);
}

.btn-modal-cancel:hover {
  border-color: var(--pt-primary);
  color: var(--pt-primary);
}

.btn-modal-confirm {
  background: linear-gradient(135deg, var(--pt-primary), var(--pt-secondary));
  border: none;
  color: var(--pt-surface);
}

.btn-modal-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 122, 230, 0.3);
}

/* ========================================
   COLOR SCHEME PICKER MODAL
   ======================================== */

.color-scheme-picker {
  padding: 20px;
}

.color-scheme-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.color-scheme-swatch {
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.color-scheme-swatch:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.color-scheme-swatch.selected {
  border-color: #000;
  border-width: 3px;
  box-shadow: 0 0 0 2px #FFF, 0 0 0 5px var(--pt-primary);
}

.color-scheme-swatch-preview {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.color-scheme-swatch-preview > div {
  flex: 1;
}

/* Scheme Hover Tooltip */
.color-scheme-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #FFF;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 100;
}

.color-scheme-swatch:hover .color-scheme-tooltip {
  opacity: 1;
}

/* ========================================
   MY PROJECTS LIST VIEW
   ======================================== */

/* Projects Header */
.projects-header {
  margin-bottom: 32px;
}

.btn-primary {
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--pt-primary), var(--pt-secondary));
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  padding: 12px 24px;
  background: transparent;
  color: var(--pt-text);
  border: 2px solid var(--pt-border);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-secondary:hover {
  border-color: var(--pt-primary);
  color: var(--pt-primary);
  transform: translateY(-2px);
}

.btn-danger {
  padding: 12px 24px;
  background: transparent;
  color: #ef4444;
  border: 2px solid #ef4444;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-danger:hover {
  background: #ef4444;
  color: white;
  transform: translateY(-2px);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 6px;
}

/* Project Controls (Filters + Search) */
.project-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Filter Tabs */
.filter-tabs {
  display: flex;
  gap: 8px;
  background: var(--pt-surface);
  padding: 4px;
  border-radius: 8px;
}

.filter-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--pt-text-secondary);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-tab:hover {
  background: rgba(102, 126, 234, 0.1);
  color: var(--pt-primary);
}

.filter-tab.active {
  background: var(--pt-primary);
  color: white;
}

.filter-count {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  min-width: 24px;
  text-align: center;
}

.filter-tab.active .filter-count {
  background: rgba(255, 255, 255, 0.2);
}

/* Search Box */
.search-box {
  flex: 0 1 300px;
}

.search-box input {
  width: 100%;
  padding: 10px 16px;
  border: 2px solid var(--pt-border);
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s;
}

.search-box input:focus {
  outline: none;
  border-color: var(--pt-primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Projects Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* Project Card */
.project-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  border: 2px solid transparent;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-color: var(--pt-primary);
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
}

.project-card-title-section {
  flex: 1;
  min-width: 0;
}

.project-card-title {
  margin: 0 0 4px 0;
  color: #111;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-card-subtitle {
  color: #6b7280;
  font-size: 13px;
  margin: 0;
}

.project-status-badge {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Progress Bar */
.project-progress-container {
  margin-bottom: 16px;
}

.project-progress-bar {
  background: #f3f4f6;
  border-radius: 6px;
  height: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}

.project-progress-fill {
  background: linear-gradient(90deg, var(--pt-primary), var(--pt-accent));
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.project-progress-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

/* Stats */
.project-card-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 0;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 11px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.stat-value {
  font-size: 16px;
  color: #111;
  font-weight: 700;
}

.stat-value.overdue,
.stat.overdue .stat-value {
  color: #ef4444;
}

/* Description */
.project-card-description {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Actions */
.project-card-actions {
  display: flex;
  gap: 8px;
}

.btn-view-project {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  color: var(--pt-primary);
  border: 2px solid var(--pt-primary);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-view-project:hover {
  background: var(--pt-primary);
  color: white;
}

/* Empty State */
.empty-state,
.error-state,
.loading-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
}

.empty-state-icon,
.error-state-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.empty-state-title,
.error-state-title {
  font-size: 24px;
  font-weight: 700;
  color: #111;
  margin: 0 0 8px 0;
}

.empty-state-message,
.error-state-message {
  font-size: 16px;
  color: #6b7280;
  margin: 0 0 24px 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.loading-state {
  color: #6b7280;
  font-size: 16px;
}

/* ========================================
   TASK DETAIL MODAL
   ======================================== */

.task-detail-modal-content {
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
}

.task-detail-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Task Detail Sections */
.task-detail-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-detail-section label {
  font-weight: 600;
  font-size: 13px;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Form Fields */
.task-detail-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.task-detail-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-input,
.task-select,
.task-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s;
}

.task-input:focus,
.task-select:focus,
.task-textarea:focus {
  outline: none;
  border-color: var(--pt-primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.task-textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

/* Small Buttons */
.btn-add-small,
.btn-remove-small {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add-small {
  background: var(--pt-primary);
  color: white;
}

.btn-add-small:hover {
  background: var(--pt-secondary);
}

.btn-remove-small {
  background: transparent;
  color: #ef4444;
  font-size: 18px;
  padding: 2px 8px;
  line-height: 1;
}

.btn-remove-small:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Dependencies List */
.dependencies-list,
.linked-items-list,
.files-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dependency-item,
.linked-item,
.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--pt-surface);
  border-radius: 6px;
  border: 1px solid var(--pt-border);
}

.dependency-name,
.linked-item-name {
  flex: 1;
  font-size: 14px;
  color: #374151;
}

.file-item {
  gap: 12px;
}

.file-name {
  flex: 1;
  font-size: 14px;
  color: var(--pt-primary);
  text-decoration: none;
}

.file-name:hover {
  text-decoration: underline;
}

.file-size {
  font-size: 12px;
  color: #9ca3af;
}

/* Delete Button */
.btn-delete-task {
  padding: 10px 20px;
  background: transparent;
  color: #ef4444;
  border: 2px solid #ef4444;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
  margin-right: auto;
}

.btn-delete-task:hover {
  background: #ef4444;
  color: white;
}

/* ========================================
   BOARD VIEW (KANBAN)
   ======================================== */

.project-board-view {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px 0;
  min-height: 600px;
}

/* Kanban Column */
.kanban-column {
  display: flex;
  flex-direction: column;
  background: var(--pt-surface);
  border-radius: 12px;
  overflow: hidden;
}

.kanban-column-header {
  padding: 16px;
  background: white;
  border-bottom: 1px solid var(--pt-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kanban-column-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}

.kanban-count {
  background: var(--pt-primary);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}

/* Cards Container */
.kanban-cards-container {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 200px;
  transition: background 0.2s;
}

.kanban-cards-container.drag-over {
  background: rgba(102, 126, 234, 0.1);
}

.kanban-empty {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
  font-size: 14px;
}

/* Kanban Card */
.kanban-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
  display: flex;
  overflow: hidden;
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: var(--pt-primary);
}

.kanban-card.dragging {
  opacity: 0.5;
}

.kanban-card-type {
  width: 6px;
  flex-shrink: 0;
}

.kanban-card-content {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kanban-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
}

.kanban-card-description {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kanban-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.kanban-card-dates,
.kanban-card-assignee {
  font-size: 12px;
  color: #9ca3af;
}

/* ========================================
   LIST VIEW (TABLE)
   ======================================== */

.project-list-view {
  padding: 20px 0;
}

/* List Controls */
.list-view-controls {
  margin-bottom: 20px;
}

.list-filter-tabs {
  display: flex;
  gap: 8px;
  background: var(--pt-surface);
  padding: 4px;
  border-radius: 8px;
  width: fit-content;
}

.list-filter-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--pt-text-secondary);
  transition: all 0.2s;
}

.list-filter-tab:hover {
  background: rgba(102, 126, 234, 0.1);
  color: var(--pt-primary);
}

.list-filter-tab.active {
  background: var(--pt-primary);
  color: white;
}

/* Table Container */
.list-table-container {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.list-table {
  width: 100%;
  border-collapse: collapse;
}

.list-table thead {
  background: var(--pt-surface);
  border-bottom: 2px solid var(--pt-border);
}

.list-table th {
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.list-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.list-table th.sortable:hover {
  background: rgba(102, 126, 234, 0.05);
}

.list-table th.sorted {
  color: var(--pt-primary);
}

.sort-icon {
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.5;
}

.list-table th.sorted .sort-icon {
  opacity: 1;
}

.list-table tbody tr {
  border-bottom: 1px solid var(--pt-border);
  transition: background 0.15s;
}

.list-table tbody tr:hover {
  background: rgba(102, 126, 234, 0.03);
  cursor: pointer;
}

.list-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: #374151;
}

/* Column Widths */
.col-checkbox {
  width: 40px;
  text-align: center;
}

.col-phase {
  width: 180px;
}

.col-stage {
  width: 180px;
}

.col-name {
  min-width: 200px;
}

.col-assigned {
  width: 150px;
}

.col-dates {
  width: 130px;
}

.col-status {
  width: 130px;
}

/* Status Badge Small */
.status-badge-small {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: inline-block;
}

/* Checkbox */
.task-checkbox {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

#select-all-tasks {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

/* ========================================
   HIERARCHICAL ACCORDION TIMELINE
   ======================================== */

/* Phase Section */
.phase-section {
  border-bottom: 1px solid var(--pt-border);
}

.phase-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--pt-surface), var(--pt-background));
  border-left: 4px solid var(--pt-primary);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 700;
  font-size: 15px;
  height: 50px;
  box-sizing: border-box;
}

.phase-header:hover {
  background: linear-gradient(135deg, var(--pt-primary), var(--pt-secondary));
  color: var(--pt-surface);
}

.phase-header.collapsed {
  opacity: 0.7;
}

.phase-toggle {
  flex-shrink: 0;
  font-size: 12px;
  width: 16px;
  transition: transform 0.2s;
}

.phase-name {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phase-progress-bar {
  position: relative;
  width: 120px;
  height: 20px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.phase-header:hover .phase-progress-bar {
  background: rgba(255, 255, 255, 0.2);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pt-accent), var(--pt-primary));
  border-radius: 10px;
  transition: width 0.3s ease;
  position: relative;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--pt-text);
  z-index: 1;
}

.phase-header:hover .progress-text {
  color: var(--pt-surface);
}

.phase-dates {
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Stage Section */
.stage-section {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.stage-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 32px;
  background: var(--pt-surface);
  border-left: 3px solid var(--pt-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 600;
  font-size: 14px;
  height: 40px;
  box-sizing: border-box;
}

.stage-header:hover {
  background: linear-gradient(135deg, var(--pt-secondary), var(--pt-accent));
  color: var(--pt-surface);
}

.stage-header.collapsed {
  opacity: 0.7;
}

.stage-toggle {
  flex-shrink: 0;
  font-size: 11px;
  width: 14px;
  transition: transform 0.2s;
}

.stage-name {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-status {
  flex-shrink: 0;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

.status-badge.pending {
  background: rgba(156, 163, 175, 0.2);
  color: #6b7280;
}

.status-badge.in-progress,
.status-badge.in_progress {
  background: rgba(59, 130, 246, 0.2);
  color: #2563eb;
}

.status-badge.completed {
  background: rgba(34, 197, 94, 0.2);
  color: #16a34a;
}

.status-badge.blocked {
  background: rgba(239, 68, 68, 0.2);
  color: #dc2626;
}

/* Track Headers in Hierarchical View */
.stage-section .track-header {
  padding-left: 48px;
  background: var(--pt-background);
  border-left: 2px solid var(--pt-border);
}

/* Phase Timeline Row (right side placeholder) */
.phase-timeline-row {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
  border-bottom: 1px solid var(--pt-border);
}

/* Stage Timeline Row (right side placeholder) */
.stage-timeline-row {
  background: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Timeline Tracks in Hierarchical View */
.phase-timeline .timeline-track,
.stage-timeline .timeline-track {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1280px) {
  .templates-grid,
  .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .project-view {
    flex-direction: column;
  }

  .track-list {
    width: 100%;
    max-height: 200px;
    border-right: none;
    border-bottom: 2px solid var(--pt-border);
  }

  .timeline-header {
    padding-left: 20px;
  }

  .task-detail-panel {
    width: 100%;
    border-left: none;
    border-top: 2px solid var(--pt-border);
  }
}

@media (max-width: 768px) {
  .project-tracker-nav {
    flex-wrap: wrap;
  }

  .projects-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .project-controls {
    width: 100%;
    justify-content: space-between;
  }

  .color-scheme-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ========================================
   BUDGET TAB STYLES
   ======================================== */

.budget-tab {
  padding: 24px;
}

.budget-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.summary-card {
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: 8px;
  padding: 16px;
}

.card-label {
  font-size: 12px;
  color: var(--pt-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.card-value {
  font-size: 20px;
  color: var(--pt-text);
  font-weight: 700;
}

.form-select,
.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--pt-border);
  border-radius: 4px;
  background: var(--pt-background);
  color: var(--pt-text);
  font-size: 14px;
}

.form-select:focus,
.form-input:focus {
  outline: none;
  border-color: var(--pt-primary);
}

.budget-breakdown {
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: 8px;
  padding: 24px;
}

.budget-breakdown h4 {
  margin: 0 0 16px 0;
  color: var(--pt-text);
}

.budget-summary-bar {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--pt-background);
  border-radius: 6px;
}

.summary-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 11px;
  color: var(--pt-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
}

.stat-value {
  font-size: 18px;
  color: var(--pt-text);
  font-weight: 700;
}

.budget-progress-bar {
  height: 8px;
  background: var(--pt-background);
  border-radius: 4px;
  overflow: hidden;
}

.budget-progress-bar .progress-fill {
  height: 100%;
  background: var(--pt-primary);
  transition: width 0.3s ease;
}

.info-message {
  padding: 12px 16px;
  background: var(--pt-background);
  border-left: 3px solid var(--pt-primary);
  border-radius: 4px;
  color: var(--pt-text);
  margin: 0;
}

.empty-state-text {
  color: var(--pt-text-secondary);
  font-style: italic;
  margin: 16px 0;
}