/*
  Chrome-like Theme for CRM (inspired by MaterialFox and Google Chrome UI)
  Source inspiration:
  - MaterialFox: https://github.com/muckSponge/MaterialFox (MPL-2.0)
  This file adapts visual tokens and patterns to a web-app context.
*/

:root{
  /* Core palette (Chrome-esque neutrals and Google Blue) */
  --chrome-bg: #f5f6f8;           /* window background */
  --chrome-surface: #ffffff;      /* cards/panels */
  --chrome-elev-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --chrome-elev-2: 0 4px 10px rgba(0,0,0,.08);
  --chrome-elev-3: 0 10px 24px rgba(0,0,0,.10);

  --chrome-outline: 0 0 0 3px rgba(26,115,232, .18); /* Google Blue focus */
  --chrome-primary: #1a73e8;      /* Google Blue */
  --chrome-primary-600:#1765cc;
  --chrome-secondary:#5f6368;     /* Chrome toolbar text gray */
  --chrome-muted:#9aa0a6;         /* subtle icons */

  --chrome-border:#e5e7eb;        /* light borders */
  --chrome-border-strong:#d1d5db;

  --chrome-radius: 10px;          /* default radii */
  --chrome-radius-sm: 8px;
  --chrome-radius-xs: 6px;

  /* Map to existing variables to minimize code churn */
  --primary: var(--chrome-primary);
  --primary-dark: var(--chrome-primary-600);
  --secondary: var(--chrome-secondary);
  --light: var(--chrome-bg);
  --gray: var(--chrome-border);
  --border: var(--chrome-border);
  --card-shadow: var(--chrome-elev-1);
  --card-shadow-lg: var(--chrome-elev-2);
  --dark: #202124; /* text */

  /* Reusable glossy overlay for colored surfaces */
  --glossy-overlay: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.38) 10%, rgba(255,255,255,0.16) 48%, rgba(0,0,0,0.06) 100%);
}

/* Base canvas */
body{
  background: url('https://res.cloudinary.com/dafsv1e1n/image/upload/v1759412493/pc_background_qqd7wi.png') center/cover no-repeat fixed;
  color: var(--dark);
  font-variation-settings: "wght" 440;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Desktop PWA title bar offset - PROPER ROOT FIX */
:root {
  --titlebar-height: 0px;
}

@media (display-mode: standalone) {
  :root {
    --titlebar-height: 0px; /* Changed from 30px to 0px to remove gap */
  }
  
  /* Remove extra padding for sidebar header in PWA mode */
  .sidebar-header {
    padding-top: 16px !important; /* Reduced from 24px */
  }
}

/* Ensure all inputs are interactive */
input, textarea, select {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}

/* Sidebar: clean, subtle separation similar to Chrome tab strip */
.sidebar{
  border-right: none !important; /* remove light edge */
  box-shadow: none;
}
/* Always use white text inside the left panel for strong contrast */
.sidebar *,
.sidebar a,
.sidebar .nav-item{
  color:#ffffff !important;
}
.sidebar-header h1{ color: #ffffff !important; font-weight: 600; }
.sidebar .nav-item{
  font-weight: 500;
  border-radius: var(--chrome-radius-xs);
  padding: 10px 12px;
}
.sidebar .nav-item.active,
.sidebar .nav-item:hover{
  background: rgba(255,255,255,0.18); /* consistent pill on blue */
  color: #ffffff !important;
}
.sidebar .nav-item.active{ border-left: 0 !important; }
.sidebar .nav-item i{ color: inherit !important; opacity: 0.9; }
.sidebar-footer{
  border-top: 1px solid var(--chrome-border);
}
.logout-btn{
  border-radius: 999px;
  color:#ffffff !important; /* default; light theme overrides below */
}

/* Top section headers */
.section-header{
  background: transparent;
  border: none;
  padding: 12px 0 8px 0;
}
.section-title{ font-weight: 600; }
.content-area{ padding-top: 8px; padding-right: 0; }
.date-filters label{ color:#5f6368; }
.date-filters input[type="date"]{ height: 38px; }
.date-filters .btn{ margin-left: 6px; }
.form-group label{ color:#3c4043; font-weight: 600; }

/* Cards / stat cards — visual fully owned by liquid-glass.css (all !important) */
/* Only non-glass elements styled here */
.search-container-full,
.form-container,
.notes-section-card,
#profileFreeTextSection .free-text-card{
  background: var(--chrome-surface);
  border: 1px solid var(--chrome-border);
  border-radius: var(--chrome-radius);
  box-shadow: var(--chrome-elev-1);
}
.stat-card .icon{ box-shadow: inset 0 -2px 6px rgba(26,115,232,.12); }
.stat-card .title{ color:#5f6368; }

/* Buttons */
.btn{
  border-radius: 999px; /* Chrome pill buttons */
  /* Softer gloss just for buttons */
  --btn-gloss: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.16) 40%, rgba(255,255,255,0.08) 100%);
  /* Solid chrome-like gradient without harsh top line */
  background: linear-gradient(180deg, #3780f5 0%, #2b74ea 40%, #1f6fe0 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.08);
  border: none !important; /* eliminate halo/white border */
  outline: none;
  will-change: transform, box-shadow;
}
.btn:hover{
  background: linear-gradient(180deg, #4389fb 0%, #2b6fda 40%, #1b63cb 100%);
  transform: translateY(-1px); /* subtle lift */
  box-shadow: 0 4px 10px rgba(26,115,232,.18);
}
.btn:active{
  transform: translateY(0); /* settle back */
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.12);
}
.btn-secondary{ color:#ffffff; background: linear-gradient(180deg,#8b95a5 0%, #6b7280 100%); }
.btn-secondary:hover{ background: linear-gradient(180deg,#7f8a9b 0%, #616876 100%); color:#ffffff; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.btn-danger{ background: linear-gradient(180deg,#e05349 0%, #d93025 100%); }
.btn-danger:hover{ background: linear-gradient(180deg,#d7463c 0%, #b3261e 100%); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(217,48,37,.18); }
/* Disabled states: avoid white text on pale backgrounds */
.btn:disabled, .btn[disabled] {
  background: linear-gradient(180deg, #f1f5f9 0%, #e5e9ee 100%) !important;
  color: #374151 !important; /* darker gray text for readability */
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}
.btn-secondary:disabled, .btn-secondary[disabled]{
  background: linear-gradient(180deg, #d1d5db 0%, #b6bcc6 100%) !important;
  color: #111827 !important;
}
/* Normalize button heights */
.btn, .form-actions .btn{ min-height: 38px; }

/* Icon buttons minimal hover ring */
.btn-icon:focus-visible{
  outline: none;
  box-shadow: var(--chrome-outline);
}
.btn-icon:hover{ transform: none !important; }

/* Inputs, selects, textareas – harmonize with Chrome */
input,
select,
textarea{
  border-radius: var(--chrome-radius-sm) !important;
  border: 1px solid var(--chrome-border) !important;
  background: #f8fafc !important;
  box-sizing: border-box;
  line-height: 1.4;
  padding: 10px 12px;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  box-shadow: var(--chrome-outline) !important;
  background:#fff !important;
}
/* Consistent control sizing */
input, select, textarea{ font-size: 14px; }
input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], select{ min-height: 38px; height: auto; }
select{ line-height: 1.2; }

/* Modals */
.modal{ backdrop-filter: blur(2px); }
.modal-content{
  border-radius: var(--chrome-radius);
  border: 1px solid var(--chrome-border);
  box-shadow: var(--chrome-elev-3) !important;
}
.close-modal{ color:#5f6368; }
.close-modal:hover{ color:#1f2937; }

/* Tables */
.table, table{
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--chrome-border);
  border-radius: var(--chrome-radius);
  overflow: hidden;
  box-shadow: var(--chrome-elev-1);
}
.table th, table th{
  background:#f8f9fb;
  color:#3c4043;
  font-weight:600;
}
.table td, .table th, table td, table th{
  border-bottom:1px solid var(--chrome-border);
}
.table tr:hover, table tr:hover{ background:#f7faff; }

/* Dropdowns / menus (search results lists, etc.) */
.search-results,
.results-container{
  border: 1px solid var(--chrome-border);
  border-radius: var(--chrome-radius-sm);
  box-shadow: var(--chrome-elev-2);
}
.search-result-item:hover{ background:#e8f0fe !important; color:#174ea6 !important; }
.search-result-item:hover{ background: var(--glossy-overlay), #e8f0fe !important; }

/* Tabs / subnav (if any) */
.stage-nav-btn{
  border-radius: 999px;
  border: 1px solid transparent;
}
.stage-nav-btn:hover{
  background: var(--glossy-overlay), #e8f0fe;
  color:#174ea6;
}

/* Search input */
.search-container input{
  border-radius: var(--chrome-radius-sm);
}
.search-container i{ color:#9aa0a6; }

/* Scrollbars – Chrome-like (WebKit) */
*::-webkit-scrollbar{ height:12px; width:12px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background-color: #c7cbd1;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover{ background-color:#aeb4bc; }

/* Chips / badges */
.admin-badge{
  background: var(--glossy-overlay), #e8f0fe;
  color:#174ea6;
  border:1px solid #d2e3fc;
  border-radius:999px;
  padding:2px 8px;
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Pagination (generic) */
.pagination .page-link,
.pager .page-link{
  border-radius: 999px;
  border: 1px solid var(--chrome-border);
}
.pagination .page-link:hover,
.pager .page-link:hover{ background:#e8f0fe; }

/* Header action hover rings */
.quick-action-btn{
  border:1px solid transparent;
  border-radius:12px;
}
.quick-action-btn:hover{
  box-shadow: var(--chrome-outline);
  border-color: #bcd2fb;
}

/* Profile-specific containers */
#profileModal .modal-content{
  border-radius: 14px;
  border: 1px solid var(--chrome-border);
  box-shadow: var(--chrome-elev-3) !important;
}
#profileModal .profile-container{
  background: #e3f2fd !important; /* pale blue to match modal-fix */
  border:1px solid var(--chrome-border);
  border-radius: var(--chrome-radius);
}

#profileModal .notes-card{
  background: var(--glossy-overlay), #fff;
  border:1px solid var(--chrome-border);
  border-radius: var(--chrome-radius);
}

/* Calendar accents */
.calendar-nav button{
  border-radius: 999px;
  border: 1px solid var(--chrome-border);
}
.calendar-nav button:hover{ background:#e8f0fe; color:#174ea6; }

/* Select arrow color normalization on Windows */
select{
  background-position: right 12px center;
  background-size: 16px 16px;
}

/* Links */
 a{ color: var(--chrome-primary); }
 a:hover{ color: var(--chrome-primary-600); }

/* --- Light theme: darker glossy blue sidebar matching classic theme --- */
body.theme-light .sidebar{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 20%, rgba(0,0,0,0.08) 100%),
    linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 55%, #1e40af 100%) !important;
}
/* Force white text/icons across the blue area */
body.theme-light .sidebar .sidebar-header *,
body.theme-light .sidebar .nav-links *,
body.theme-light .sidebar .nav-item,
body.theme-light .sidebar .nav-item i{
  color:#ffffff !important;
}
body.theme-light .sidebar .nav-item{ background: transparent !important; }
body.theme-light .sidebar .nav-item:hover{ background: rgba(255,255,255,0.18) !important; color:#ffffff !important; }
body.theme-light .sidebar .nav-item.active{ background: rgba(255,255,255,0.28) !important; color:#ffffff !important; border-left: 0 !important; }
body.theme-light .sidebar .nav-item.active *,
body.theme-light .sidebar .nav-item:hover *{
  color:#ffffff !important;
}
/* Keep footer divider and ensure text/icon contrast */
body.theme-light .sidebar-footer{ border-top: 1px solid rgba(255,255,255,0.25) !important; background: transparent !important; }
/* Match header divider to footer divider color and remove header background */
body.theme-light .sidebar-header{ border-bottom: 1px solid rgba(255,255,255,0.25) !important; background: transparent !important; }

/* Light-theme sidebar logout-btn — handled by ai-copilot.css */
body.theme-light .sidebar .logout-btn i{ color: inherit !important; filter: none !important; }
body.theme-light .sidebar .logout-btn:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.30) !important;
}