/* ==========================================================================
   SAVITRI SYSTEMS — CORPORATE THEME
   Shared design system. Include this on every page AFTER bootstrap.css.
   Keep this file the single source of truth for colors/spacing/components
   so every module (login, dashboard, leads, invoices, etc.) looks the same.

   Palette: bold corporate navy + gold. Class names are kept as "hs-*" for
   backward compatibility with all existing module pages — only the design
   tokens (colors, shadows, effects) have changed underneath them.
   ========================================================================== */

:root{
  /* Core palette — deep corporate navy + gold signature accent */
  --hs-navy:         #0b1f3d;   /* deep corporate navy       */
  --hs-navy-deep:    #050f1f;   /* near-black navy, sidebar  */
  --hs-navy-mid:     #142c52;
  --hs-gold:         #c9a227;   /* signature gold accent     */
  --hs-gold-bright:  #e6c458;
  --hs-gold-soft:    #f6ecc9;

  /* Legacy aliases kept so every existing hs-* / btn-hs-* rule below
     (and any inline var(--hs-primary) usage elsewhere) resolves to the
     new navy/gold identity without touching markup on 80+ pages. */
  --hs-primary:      var(--hs-navy);
  --hs-primary-dark: var(--hs-navy-deep);
  --hs-primary-light:#eef1f7;
  --hs-accent:       var(--hs-gold);
  --hs-blue:         #2f6fb0;   /* trust blue for links/info */
  --hs-danger:       #b3261e;
  --hs-warning:      #b8860b;
  --hs-success:      #1e7145;

  --hs-ink:          #10192b;   /* near-black text           */
  --hs-muted:        #64748b;
  --hs-bg:           #f4f5f8;   /* neutral page background   */
  --hs-card:         #ffffff;
  --hs-border:       #e3e6ec;

  --hs-radius-sm:    10px;
  --hs-radius:       16px;
  --hs-radius-lg:    22px;
  --hs-shadow-sm:     0 2px 10px rgba(11,31,61,.07);
  --hs-shadow:        0 10px 30px rgba(11,31,61,.12);
  --hs-shadow-lg:      0 20px 50px rgba(11,31,61,.18);

  --hs-font: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --hs-font-display: 'Fraunces', 'Georgia', serif;
}

body{
  font-family: var(--hs-font);
  color: var(--hs-ink);
  background: var(--hs-bg);
}

/* Buttons ---------------------------------------------------------------- */
.btn-hs-primary{
  background: linear-gradient(135deg, var(--hs-gold) 0%, var(--hs-gold-bright) 100%);
  border: none;
  color: var(--hs-navy-deep);
  font-weight: 700;
  letter-spacing: .2px;
  border-radius: var(--hs-radius-sm);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow: 0 6px 16px rgba(201,162,39,.35);
}
.btn-hs-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(201,162,39,.45);
  color: var(--hs-navy-deep);
  background: linear-gradient(135deg, #b8911f 0%, var(--hs-gold) 100%);
}
.btn-hs-primary:active{ transform: translateY(0); }

.btn-hs-outline{
  background: #fff;
  border: 1.5px solid var(--hs-border);
  color: var(--hs-navy);
  font-weight: 600;
  border-radius: var(--hs-radius-sm);
}
.btn-hs-outline:hover{
  border-color: var(--hs-navy);
  background: var(--hs-primary-light);
  color: var(--hs-navy-deep);
}

/* Cards / surfaces --------------------------------------------------------*/
.hs-card{
  background: var(--hs-card);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  box-shadow: var(--hs-shadow-sm);
}

/* Form controls ------------------------------------------------------------*/
.hs-field .form-label{
  font-weight: 600;
  font-size: .85rem;
  color: var(--hs-ink);
  letter-spacing: .2px;
  margin-bottom: 6px;
}
.hs-input-group{
  position: relative;
  display: flex;
  align-items: center;
  background: #fbfbfd;
  border: 1.5px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.hs-input-group:focus-within{
  border-color: var(--hs-gold);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(201,162,39,.15);
}
.hs-input-group .hs-icon{
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hs-muted);
  font-size: 15px;
}
.hs-input-group:focus-within .hs-icon{
  color: var(--hs-gold);
}
.hs-input-group input{
  border: none;
  background: transparent;
  outline: none;
  box-shadow: none !important;
  height: 50px;
  padding-right: 12px;
  font-size: .96rem;
  color: var(--hs-ink);
  width: 100%;
}
.hs-input-group .hs-toggle{
  border: none;
  background: transparent;
  color: var(--hs-muted);
  width: 46px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hs-input-group .hs-toggle:hover{ color: var(--hs-gold); }

/* Badges / pills ----------------------------------------------------------*/
.hs-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(201,162,39,.45);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
}

/* Tables / DataTables -------------------------------------------------------*/
table.dataTable thead th,
.table thead th{
  background: var(--hs-primary-light);
  color: var(--hs-navy-deep);
  border-bottom: none !important;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 700;
}
table.dataTable tbody tr:hover{
  background: #f8f9fb;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: var(--hs-navy) !important;
  border-color: var(--hs-navy) !important;
  color: #fff !important;
  border-radius: 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: var(--hs-primary-light) !important;
  border-color: var(--hs-navy) !important;
  color: var(--hs-navy-deep) !important;
  border-radius: 8px;
}
.dt-buttons .btn{
  border-radius: 8px !important;
}

/* Utility ------------------------------------------------------------------*/
.hs-text-muted{ color: var(--hs-muted); }
.hs-text-primary{ color: var(--hs-navy); }
.hs-text-gold{ color: var(--hs-gold); }
.hs-link{ color: var(--hs-blue); font-weight: 600; text-decoration: none; }
.hs-link:hover{ color: var(--hs-navy-deep); text-decoration: underline; }

/* Signature — thin gold hairline used to mark active/important elements */
.hs-gold-rule{
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--hs-gold) 0%, var(--hs-gold-bright) 60%, transparent 100%);
}