/* Server Solutions CRM — theme layer for Bootstrap 5
   Utility-first: markup uses Bootstrap utilities; this file only
   (1) maps the design-system tokens onto Bootstrap variables and
   (2) adds the few utilities Bootstrap does not ship. */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap');

:root{
  /* --- design tokens --- */
  --ss-navy-900:#0f2a54; --ss-navy-800:#1a3868; --ss-navy-700:#1f4e92; --ss-navy-600:#2a5fab;
  --ss-cyan-700:#0087bd; --ss-cyan-600:#00a0da; --ss-cyan-500:#00adef; --ss-cyan-300:#8bdcfb; --ss-cyan-100:#e3f7fe;
  --ss-gray-900:#1b1f24; --ss-gray-700:#495057; --ss-gray-500:#8b929b; --ss-gray-200:#e5e5e5;
  --ss-gray-100:#f2f3f7; --ss-gray-50:#f9f7f6;
  --ss-success:#3eb95f; --ss-info:#02a2b9; --ss-warning:#ea9200; --ss-danger:#e74b2b;
  --ss-shadow-card:0 0 50px rgba(0,0,0,.03);
  --ss-shadow-shell:0 4px 40px rgba(0,0,0,.10);
  --ss-sidebar-width:253px;
  --ss-header-height:64px;

  /* --- Bootstrap 5 overrides --- */
  --bs-primary:var(--ss-cyan-500);
  --bs-primary-rgb:0,173,239;
  --bs-secondary:var(--ss-navy-700);
  --bs-secondary-rgb:31,78,146;
  --bs-success:var(--ss-success);
  --bs-info:var(--ss-info);
  --bs-warning:var(--ss-warning);
  --bs-danger:var(--ss-danger);
  --bs-body-bg:var(--ss-gray-50);
  --bs-body-color:#292929;
  --bs-body-font-family:'Nunito Sans',system-ui,sans-serif;
  --bs-body-font-size:.875rem;
  --bs-heading-color:var(--ss-navy-900);
  --bs-border-color:var(--ss-gray-200);
  --bs-border-radius:.5rem;
  --bs-border-radius-lg:1rem;
  --bs-border-radius-xl:1.5rem;
  --bs-border-radius-pill:999px;
  --bs-link-color:var(--ss-cyan-500);
  --bs-link-hover-color:var(--ss-cyan-600);
}

body{background:var(--bs-body-bg);font-family:var(--bs-body-font-family);}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:700;letter-spacing:.5px;color:var(--ss-navy-900);}

/* Cards: 24px radius, no border, soft shadow (design-system rule) */
.card{border:0;border-radius:var(--bs-border-radius-xl);box-shadow:var(--ss-shadow-card);}
.card-header{background:#fff;border-bottom:1px solid var(--bs-border-color);padding:1.125rem 1.25rem;}
.card-body{padding:1.25rem;}

/* Buttons & inputs are pill-shaped */
.btn,.form-control,.form-select{border-radius:var(--bs-border-radius-pill);}
.btn{font-weight:600;transition:.3s ease;}
.btn:hover{filter:brightness(.92);}
.btn-primary,.btn-secondary{color:#fff;}
.form-control:focus,.form-select:focus{border-color:var(--ss-cyan-500);box-shadow:0 0 0 .2rem rgba(0,173,239,.15);}

/* Tables */
.table{--bs-table-border-color:#f3f3f3;font-size:.8125rem;margin-bottom:0;}
.table>thead th{font-size:.6875rem;text-transform:uppercase;letter-spacing:.4px;color:var(--ss-gray-500);font-weight:700;border-bottom-width:1px;}
.table>tbody td{padding:.875rem 1.25rem;vertical-align:middle;}
.table>thead th{padding:.875rem 1.25rem;}
.table-hover>tbody>tr:hover{--bs-table-accent-bg:var(--ss-gray-50);cursor:pointer;}

/* Badges */
.badge{font-weight:700;letter-spacing:.3px;font-size:.6875rem;padding:.25rem .75rem;}

/* ---------- app shell ---------- */
.app-shell{display:flex;min-height:100vh;}
.app-sidebar{width:var(--ss-sidebar-width);flex-shrink:0;background:#fff;box-shadow:var(--ss-shadow-shell);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;}
.app-sidebar__brand{padding:.875rem 1.25rem;background:var(--ss-cyan-500);}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.app-header{min-height:var(--ss-header-height);background:#fff;box-shadow:0 0 20px rgba(0,0,0,.04);position:sticky;top:0;z-index:5;}
.app-content{flex:1;padding:1.75rem;display:flex;flex-direction:column;gap:1.375rem;}
.header-search{width:15rem;}
.due-col{width:3.5rem;}

.nav-side{display:flex;flex-direction:column;padding:1rem 0;flex:1;overflow-y:auto;}
.nav-side__link{display:flex;align-items:center;gap:.875rem;padding:.6875rem 1.5rem;font-size:.875rem;font-weight:600;color:#292929;text-decoration:none;border-right:3px solid transparent;transition:.3s ease;}
.nav-side__link:hover{color:var(--ss-cyan-500);}
.nav-side__link.active{color:var(--ss-cyan-500);background:var(--ss-cyan-100);border-right-color:var(--ss-cyan-500);}
.nav-side__icon{width:20px;text-align:center;font-size:.9375rem;}

/* ---------- utilities Bootstrap does not ship ---------- */
.fs-7{font-size:.8125rem !important;}
.fs-8{font-size:.75rem !important;}
.fs-9{font-size:.6875rem !important;}
.text-brand{color:var(--ss-navy-700) !important;}
.bg-brand-soft{background:var(--ss-cyan-100) !important;}
.cursor-pointer{cursor:pointer;}
.min-w-0{min-width:0 !important;}

.avatar{border-radius:50%;background:var(--ss-navy-700);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}
.avatar-sm{width:22px;height:22px;font-size:.5625rem;}
.avatar-md{width:34px;height:34px;font-size:.75rem;}
.avatar-lg{width:56px;height:56px;font-size:1.25rem;}

.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.dot-new{background:var(--ss-gray-500);} .dot-progress{background:var(--ss-cyan-500);}
.dot-waiting{background:var(--ss-warning);} .dot-done{background:var(--ss-success);}

.meter{height:8px;border-radius:999px;background:var(--ss-gray-100);overflow:hidden;}
.meter__fill{height:100%;border-radius:999px;background:var(--ss-cyan-500);}
.meter__fill--navy{background:var(--ss-navy-700);}
.meter__fill--success{background:var(--ss-success);}
.meter__fill--warning{background:var(--ss-warning);}
.meter__fill--danger{background:var(--ss-danger);}

.chart-bars{display:flex;align-items:flex-end;gap:1.5rem;height:230px;}
.chart-bars__col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.5rem;height:100%;}
.chart-bars__bar{width:100%;border-radius:8px 8px 0 0;background:var(--ss-cyan-500);}

.filter-chip{padding:.5rem 1.125rem;border-radius:999px;font-size:.8125rem;font-weight:700;cursor:pointer;background:#fff;color:#292929;border:1px solid var(--bs-border-color);text-decoration:none;transition:.3s ease;}
.filter-chip.active{background:var(--ss-cyan-500);color:#fff;border-color:var(--ss-cyan-500);}

.tag-auto{font-size:.625rem;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--ss-cyan-700);background:var(--ss-cyan-100);border:1px solid var(--ss-cyan-300);padding:.125rem .5rem;border-radius:6px;white-space:nowrap;}

.timeline-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;flex-shrink:0;}
.timeline-icon--call{background:var(--ss-cyan-500);} .timeline-icon--email{background:var(--ss-navy-700);}
.timeline-icon--meeting{background:var(--ss-success);} .timeline-icon--note{background:var(--ss-gray-500);}

.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;align-items:start;}
.kanban--deals{grid-template-columns:repeat(3,minmax(0,1fr));}
.kanban__col{min-height:20rem;}
.kanban__body{padding:.75rem;display:flex;flex-direction:column;gap:.625rem;min-height:7.5rem;}
.kanban__card{border:1px solid var(--bs-border-color);border-radius:14px;padding:.75rem;background:#fff;cursor:grab;}
.kanban__card.dragging{opacity:.5;}
.kanban__col.drop-target .kanban__body{background:var(--ss-cyan-100);border-radius:0 0 1.5rem 1.5rem;}

/* ---------- auth shell (Identity area: login/register/manage) ---------- */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;}
.auth-card-wrap{width:100%;max-width:30rem;}
.auth-card-wrap--wide{max-width:48rem;}
.auth-brand{display:flex;justify-content:center;margin-bottom:1.5rem;}
.auth-brand img{height:40px;}
.auth-footer-link{text-align:center;margin-top:1rem;}

@media (max-width:1200px){ .kanban{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:992px){
  .app-sidebar{position:fixed;left:-100%;z-index:1040;transition:left .3s ease;}
  .app-sidebar.open{left:0;}
  .app-content{padding:1rem;}
  .kanban,.kanban--deals{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }