/* ============================================================
   CAYIA — Visual Skin System
   Apply via: document.documentElement.setAttribute('data-skin', id)
   Default skin: no attribute OR data-skin="default"

   To add a new skin in the future:
   1. Add [data-skin="yourSkinId"] { } block here
   2. Override only the tokens you want to change
   3. Add a skin card in index.html skin-picker-grid
   4. Add the skin entry to CAYIA_SKINS in app.js
============================================================ */

/* ──────────────────────────────────────────────────────────
   SKIN 01 — default  (current design, new logo)
   No token overrides needed — styles.css :root is the default.
────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────
   SKIN 02 — cyberpunk
   Dark, futuristic, neon glassmorphism
────────────────────────────────────────────────────────── */
[data-skin="cyberpunk"] {
  --bg:                  #05061A;
  --bg-dark:             #090B2A;
  --surface:             #0C0F30;
  --surface2:            #0F1235;
  --border:              rgba(91,123,255,.40);
  --text:                #F7F8FF;
  --text-muted:          #7A8AC9;
  --text-secondary:      #AAB3D9;
  --primary:             #2F6BFF;
  --primary-dk:          #1A54E8;
  --purple:              #B026FF;
  --green:               #20E6A1;
  --green-dk:            #17C98A;
  --red:                 #FF4D8D;
  --orange:              #FF9640;
  --accent:              #2F6BFF;
  --accent-2:            #B026FF;
  --success:             #20E6A1;
  --success-dk:          #17C98A;
  --error:               #FF4D8D;
  --warning:             #FF9640;
  --hover:               rgba(47,107,255,.12);
  --shadow:              0 2px 16px rgba(0,0,60,.55), 0 8px 40px rgba(0,0,80,.4);

  --sidebar-bg:          #04050F;
  --sidebar-text:        #5A6CA0;
  --sidebar-text-active: #7EC8FF;
  --sidebar-active-bg:   rgba(47,107,255,.20);
  --sidebar-hover-bg:    rgba(47,107,255,.09);
  --sidebar-logo-text:   #E8EEFF;
  --sidebar-border:      rgba(91,123,255,.16);

  --topbar-bg:           #070924;
  --input-bg:            rgba(15,18,53,0.85);

  --chart-1:  #2F6BFF;
  --chart-2:  #20E6A1;
  --chart-3:  #B026FF;
  --chart-4:  #FF9640;
  --chart-5:  #FF4D8D;

  --glow-primary: 0 0 18px rgba(47,107,255,.50);
  --glow-accent:  0 0 14px rgba(176,38,255,.40);
  --logo-filter:  none;

  --auth-gradient: linear-gradient(135deg, #020314 0%, #080C28 100%);
  --hero-gradient: linear-gradient(135deg, #2F6BFF 0%, #B026FF 100%);
}

/* Cyberpunk — extra glow & glass effects */
[data-skin="cyberpunk"] .stat-card,
[data-skin="cyberpunk"] .chart-card,
[data-skin="cyberpunk"] .action-card,
[data-skin="cyberpunk"] .settings-card,
[data-skin="cyberpunk"] .pos-ai-chat,
[data-skin="cyberpunk"] .pos-right {
  border-color: rgba(91,123,255,.35);
  box-shadow: 0 0 0 1px rgba(91,123,255,.12), 0 4px 24px rgba(0,0,60,.5);
}
[data-skin="cyberpunk"] .btn-primary { box-shadow: var(--glow-primary); }
[data-skin="cyberpunk"] .nav-item.active { box-shadow: inset 3px 0 0 #2F6BFF; }
[data-skin="cyberpunk"] .modal { border: 1px solid rgba(91,123,255,.35); }
[data-skin="cyberpunk"] .topbar { border-bottom-color: rgba(91,123,255,.22); }
[data-skin="cyberpunk"] .data-table { background: var(--surface); color: var(--text); }
[data-skin="cyberpunk"] .data-table th { background: var(--surface2); color: var(--text-muted); }
[data-skin="cyberpunk"] .data-table tbody tr:hover { background: var(--hover); }
[data-skin="cyberpunk"] .data-table td { border-color: var(--border); }
[data-skin="cyberpunk"] .cart-item-qty button { background: var(--surface2); color: var(--text); border-color: var(--border); }
[data-skin="cyberpunk"] .table-wrapper { border-color: var(--border); }


/* ──────────────────────────────────────────────────────────
   SKIN 03 — modernSaas
   Clean, light, productive SaaS look
────────────────────────────────────────────────────────── */
[data-skin="modernSaas"] {
  --bg:                  #F6F8FC;
  --bg-dark:             #FFFFFF;
  --surface:             #FFFFFF;
  --surface2:            #F0F4FA;
  --border:              #E4E8F1;
  --text:                #0B1E3C;
  --text-muted:          #8A95A8;
  --text-secondary:      #5D6B82;
  --primary:             #2F6BFF;
  --primary-dk:          #1A54E8;
  --purple:              #6D4AFF;
  --green:               #18A058;
  --green-dk:            #128A48;
  --red:                 #E5484D;
  --orange:              #F59E0B;
  --accent:              #2F6BFF;
  --accent-2:            #6D4AFF;
  --success:             #18A058;
  --success-dk:          #128A48;
  --error:               #E5484D;
  --warning:             #F59E0B;
  --hover:               rgba(47,107,255,.04);
  --shadow:              0 1px 3px rgba(11,30,60,.06), 0 4px 16px rgba(11,30,60,.04);

  --sidebar-bg:          #FFFFFF;
  --sidebar-text:        #6B7A96;
  --sidebar-text-active: #2F6BFF;
  --sidebar-active-bg:   rgba(47,107,255,.08);
  --sidebar-hover-bg:    rgba(47,107,255,.05);
  --sidebar-logo-text:   #0B1E3C;
  --sidebar-border:      #E8EDF4;

  --topbar-bg:           #FFFFFF;
  --input-bg:            #FFFFFF;

  --chart-1:  #2F6BFF;
  --chart-2:  #18A058;
  --chart-3:  #6D4AFF;
  --chart-4:  #F59E0B;
  --chart-5:  #E5484D;

  --glow-primary: none;
  --glow-accent:  none;
  --logo-filter:  none;

  --auth-gradient: linear-gradient(135deg, #2F6BFF 0%, #6D4AFF 100%);
  --hero-gradient: linear-gradient(135deg, #2F6BFF 0%, #6D4AFF 100%);
}

[data-skin="modernSaas"] .sidebar { border-right: 1px solid var(--sidebar-border); }
[data-skin="modernSaas"] .nav-item.active { border-left: 3px solid var(--primary); }


/* ──────────────────────────────────────────────────────────
   SKIN 04 — traditionalBusiness
   Dark green, gold accents — classic banking feel
────────────────────────────────────────────────────────── */
[data-skin="traditionalBusiness"] {
  --bg:                  #001F17;
  --bg-dark:             #001209;
  --surface:             #032D21;
  --surface2:            #063A2B;
  --border:              rgba(214,168,79,.28);
  --text:                #FFF9E8;
  --text-muted:          #7A9A82;
  --text-secondary:      #C7D8CA;
  --primary:             #D6A84F;
  --primary-dk:          #C0922F;
  --purple:              #7BA88B;
  --green:               #42D392;
  --green-dk:            #30B87A;
  --red:                 #FF6B6B;
  --orange:              #E8A836;
  --accent:              #D6A84F;
  --accent-2:            #0FA36B;
  --success:             #42D392;
  --success-dk:          #30B87A;
  --error:               #FF6B6B;
  --warning:             #E8A836;
  --hover:               rgba(214,168,79,.07);
  --shadow:              0 2px 12px rgba(0,0,0,.4), 0 8px 32px rgba(0,0,0,.3);

  --sidebar-bg:          #011A10;
  --sidebar-text:        #5A7A62;
  --sidebar-text-active: #D6A84F;
  --sidebar-active-bg:   rgba(214,168,79,.14);
  --sidebar-hover-bg:    rgba(214,168,79,.07);
  --sidebar-logo-text:   #FFF9E8;
  --sidebar-border:      rgba(214,168,79,.14);

  --topbar-bg:           #032D21;
  --input-bg:            #032D21;

  --chart-1:  #D6A84F;
  --chart-2:  #42D392;
  --chart-3:  #7BA88B;
  --chart-4:  #E8A836;
  --chart-5:  #FF6B6B;

  --glow-primary: 0 0 14px rgba(214,168,79,.28);
  --glow-accent:  none;
  --logo-filter:  sepia(1) saturate(3) hue-rotate(10deg) brightness(1.1);

  --auth-gradient: linear-gradient(135deg, #001F17 0%, #032D21 100%);
  --hero-gradient: linear-gradient(135deg, #D6A84F 0%, #0FA36B 100%);
}

[data-skin="traditionalBusiness"] .data-table { background: var(--surface); color: var(--text); }
[data-skin="traditionalBusiness"] .data-table th { background: var(--surface2); color: var(--text-muted); border-color: var(--border); }
[data-skin="traditionalBusiness"] .data-table td { border-color: var(--border); }
[data-skin="traditionalBusiness"] .table-wrapper { border-color: var(--border); }
[data-skin="traditionalBusiness"] .cart-item-qty button { background: var(--surface2); color: var(--text); border-color: var(--border); }
[data-skin="traditionalBusiness"] .auth-tab.active { background: var(--primary); color: #000; }
[data-skin="traditionalBusiness"] .stat-value.green { color: var(--green); }
[data-skin="traditionalBusiness"] .btn-primary { color: #001F17; }
[data-skin="traditionalBusiness"] .topbar { border-bottom-color: rgba(214,168,79,.20); }


/* ──────────────────────────────────────────────────────────
   SKIN 05 — pinkGirly
   Soft rose, elegant, luxury feminine
────────────────────────────────────────────────────────── */
[data-skin="pinkGirly"] {
  --bg:                  #FFF2F7;
  --bg-dark:             #FFFFFF;
  --surface:             #FFFFFF;
  --surface2:            #FFF7FA;
  --border:              #F6CADB;
  --text:                #321827;
  --text-muted:          #9E6B84;
  --text-secondary:      #7A4A60;
  --primary:             #FF5C9A;
  --primary-dk:          #E0437E;
  --purple:              #D6336C;
  --green:               #21A67A;
  --green-dk:            #188A63;
  --red:                 #D92D5C;
  --orange:              #F59E0B;
  --accent:              #FF5C9A;
  --accent-2:            #FF8AB8;
  --success:             #21A67A;
  --success-dk:          #188A63;
  --error:               #D92D5C;
  --warning:             #F59E0B;
  --hover:               rgba(255,92,154,.06);
  --shadow:              0 1px 4px rgba(200,50,120,.08), 0 4px 20px rgba(200,50,120,.05);

  --sidebar-bg:          #FFF0F5;
  --sidebar-text:        #B07090;
  --sidebar-text-active: #FF5C9A;
  --sidebar-active-bg:   rgba(255,92,154,.10);
  --sidebar-hover-bg:    rgba(255,92,154,.06);
  --sidebar-logo-text:   #321827;
  --sidebar-border:      rgba(246,202,219,.9);

  --topbar-bg:           #FFFFFF;
  --input-bg:            #FFFFFF;

  --chart-1:  #FF5C9A;
  --chart-2:  #21A67A;
  --chart-3:  #D6336C;
  --chart-4:  #F59E0B;
  --chart-5:  #D92D5C;

  --glow-primary: none;
  --glow-accent:  none;
  --logo-filter:  hue-rotate(280deg) saturate(1.5) brightness(1.05);

  --auth-gradient: linear-gradient(135deg, #FF8AB8 0%, #D6336C 100%);
  --hero-gradient: linear-gradient(135deg, #FF5C9A 0%, #D6336C 100%);
}

[data-skin="pinkGirly"] .sidebar { border-right: 1px solid var(--sidebar-border); }
[data-skin="pinkGirly"] .nav-item.active { border-left: 3px solid var(--primary); }
[data-skin="pinkGirly"] .auth-tab.active { background: var(--primary); }


/* ──────────────────────────────────────────────────────────
   SKIN 06 — greenEco
   Fresh, natural, eco-friendly professional
────────────────────────────────────────────────────────── */
[data-skin="greenEco"] {
  --bg:                  #F3FAF4;
  --bg-dark:             #FFFFFF;
  --surface:             #FFFFFF;
  --surface2:            #EEF8EF;
  --border:              #D8EBDD;
  --text:                #0E3322;
  --text-muted:          #6B8F77;
  --text-secondary:      #4E715E;
  --primary:             #159957;
  --primary-dk:          #0F7A43;
  --purple:              #4A8B6A;
  --green:               #159957;
  --green-dk:            #0F7A43;
  --red:                 #D64545;
  --orange:              #E8A21A;
  --accent:              #159957;
  --accent-2:            #67C587;
  --success:             #159957;
  --success-dk:          #0F7A43;
  --error:               #D64545;
  --warning:             #E8A21A;
  --hover:               rgba(21,153,87,.06);
  --shadow:              0 1px 4px rgba(0,60,20,.07), 0 4px 16px rgba(0,60,20,.04);

  --sidebar-bg:          #E8F4EA;
  --sidebar-text:        #4E715E;
  --sidebar-text-active: #0F7A43;
  --sidebar-active-bg:   rgba(21,153,87,.12);
  --sidebar-hover-bg:    rgba(21,153,87,.06);
  --sidebar-logo-text:   #0E3322;
  --sidebar-border:      rgba(216,235,221,.95);

  --topbar-bg:           #FFFFFF;
  --input-bg:            #FFFFFF;

  --chart-1:  #159957;
  --chart-2:  #67C587;
  --chart-3:  #4A8B6A;
  --chart-4:  #E8A21A;
  --chart-5:  #D64545;

  --glow-primary: none;
  --glow-accent:  none;
  --logo-filter:  hue-rotate(130deg) saturate(1.2) brightness(0.88);

  --auth-gradient: linear-gradient(135deg, #159957 0%, #155799 100%);
  --hero-gradient: linear-gradient(135deg, #159957 0%, #67C587 100%);
}

[data-skin="greenEco"] .sidebar { border-right: 1px solid var(--sidebar-border); }
[data-skin="greenEco"] .nav-item.active { border-left: 3px solid var(--primary); }


/* ──────────────────────────────────────────────────────────
   SKIN 07 — luxuryBlack
   Premium dark, monochrome, minimalist luxury
────────────────────────────────────────────────────────── */
[data-skin="luxuryBlack"] {
  --bg:                  #050505;
  --bg-dark:             #000000;
  --surface:             #0D0D0F;
  --surface2:            #141416;
  --border:              #252528;
  --text:                #F0F0F0;
  --text-muted:          #707070;
  --text-secondary:      #ABABAB;
  --primary:             #D8D8D8;
  --primary-dk:          #BBBBBB;
  --purple:              #888888;
  --green:               #6EC87E;
  --green-dk:            #56A866;
  --red:                 #F06060;
  --orange:              #D89840;
  --accent:              #F0F0F0;
  --accent-2:            #888888;
  --success:             #6EC87E;
  --success-dk:          #56A866;
  --error:               #F06060;
  --warning:             #D89840;
  --hover:               rgba(255,255,255,.04);
  --shadow:              0 2px 12px rgba(0,0,0,.65), 0 8px 40px rgba(0,0,0,.55);

  --sidebar-bg:          #000000;
  --sidebar-text:        #4A4A4A;
  --sidebar-text-active: #D8D8D8;
  --sidebar-active-bg:   rgba(220,220,220,.07);
  --sidebar-hover-bg:    rgba(255,255,255,.04);
  --sidebar-logo-text:   #F0F0F0;
  --sidebar-border:      rgba(38,38,40,.9);

  --topbar-bg:           #0D0D0F;
  --input-bg:            #141416;

  --chart-1:  #D8D8D8;
  --chart-2:  #6EC87E;
  --chart-3:  #888888;
  --chart-4:  #D89840;
  --chart-5:  #F06060;

  --glow-primary: none;
  --glow-accent:  none;
  --logo-filter:  grayscale(1) brightness(2.2);

  --auth-gradient: linear-gradient(135deg, #050505 0%, #111113 100%);
  --hero-gradient: linear-gradient(135deg, #1F1F22 0%, #2A2A2E 100%);
}

[data-skin="luxuryBlack"] .data-table { background: var(--surface); color: var(--text); }
[data-skin="luxuryBlack"] .data-table th { background: var(--surface2); color: var(--text-muted); border-color: var(--border); }
[data-skin="luxuryBlack"] .data-table td { border-color: var(--border); }
[data-skin="luxuryBlack"] .table-wrapper { border-color: var(--border); }
[data-skin="luxuryBlack"] .cart-item-qty button { background: var(--surface2); color: var(--text); border-color: var(--border); }
[data-skin="luxuryBlack"] .topbar { border-bottom-color: var(--border); }
[data-skin="luxuryBlack"] .stat-value.green { color: var(--green); }
[data-skin="luxuryBlack"] .btn-primary { background: var(--surface2); border: 1px solid var(--border); color: var(--text); }
[data-skin="luxuryBlack"] .btn-primary:hover { background: var(--hover); border-color: var(--text-muted); }
[data-skin="luxuryBlack"] .auth-tab.active { background: var(--primary); color: #000; }
[data-skin="luxuryBlack"] .badge-trial { background: linear-gradient(135deg, #2A2A2D, #404044); }
[data-skin="luxuryBlack"] .btn-avatar { background: linear-gradient(135deg, #2A2A2D, #404044); }


/* ──────────────────────────────────────────────────────────
   DARK-SKIN INPUT FIX
   Inputs default to white bg — override for dark skins
────────────────────────────────────────────────────────── */
[data-skin="cyberpunk"] input[type="text"],
[data-skin="cyberpunk"] input[type="email"],
[data-skin="cyberpunk"] input[type="password"],
[data-skin="cyberpunk"] input[type="number"],
[data-skin="cyberpunk"] input[type="tel"],
[data-skin="cyberpunk"] input[type="date"],
[data-skin="cyberpunk"] select,
[data-skin="cyberpunk"] textarea,
[data-skin="traditionalBusiness"] input[type="text"],
[data-skin="traditionalBusiness"] input[type="email"],
[data-skin="traditionalBusiness"] input[type="password"],
[data-skin="traditionalBusiness"] input[type="number"],
[data-skin="traditionalBusiness"] input[type="tel"],
[data-skin="traditionalBusiness"] input[type="date"],
[data-skin="traditionalBusiness"] select,
[data-skin="traditionalBusiness"] textarea,
[data-skin="luxuryBlack"] input[type="text"],
[data-skin="luxuryBlack"] input[type="email"],
[data-skin="luxuryBlack"] input[type="password"],
[data-skin="luxuryBlack"] input[type="number"],
[data-skin="luxuryBlack"] input[type="tel"],
[data-skin="luxuryBlack"] input[type="date"],
[data-skin="luxuryBlack"] select,
[data-skin="luxuryBlack"] textarea {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}
[data-skin="cyberpunk"] input::placeholder,
[data-skin="traditionalBusiness"] input::placeholder,
[data-skin="luxuryBlack"] input::placeholder { color: var(--text-muted); }
[data-skin="cyberpunk"] select option,
[data-skin="traditionalBusiness"] select option,
[data-skin="luxuryBlack"] select option { background: var(--surface); color: var(--text); }

/* ──────────────────────────────────────────────────────────
   CYBERPUNK — ADDITIONAL CONTRAST FIXES
   Bug 1: color picker, modal inputs, dropdowns
   Bug 2: AI Advisor mode pills and description block
────────────────────────────────────────────────────────── */
[data-skin="cyberpunk"] input[type="color"] {
  background: var(--surface2);
  border-color: var(--border);
  padding: 2px;
  cursor: pointer;
}
[data-skin="cyberpunk"] .modal-body input[type="color"],
[data-skin="cyberpunk"] .modal-content input[type="color"] {
  background: var(--surface2);
  border: 1px solid var(--border);
}
[data-skin="cyberpunk"] .modal-body select,
[data-skin="cyberpunk"] .modal-content select {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}
[data-skin="cyberpunk"] .mode-pill {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}
[data-skin="cyberpunk"] .mode-pill:hover {
  background: var(--surface2);
  border-color: var(--primary);
  color: var(--primary);
}
[data-skin="cyberpunk"] .mode-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
[data-skin="cyberpunk"] .ai-mode-desc {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}
[data-skin="cyberpunk"] .seller-pick-btn {
  background: var(--surface2, #0C0F30);
  border-color: var(--border);
  color: var(--text, #F7F8FF);
}
[data-skin="cyberpunk"] .seller-pick-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ──────────────────────────────────────────────────────────
   SCROLLBAR (all skins)
────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }