@charset "utf-8";
/* CSS Document */

/* ==========================================================================
   SOPHI Core CSS
   Shared look-and-feel used across dashboard tools

   THINK OF THIS FILE AS:
   "The skin of your entire system"

   If you change things here → EVERYTHING updates (dashboard, tools, widgets)

   Rule of thumb:
   - Colors / spacing / shadows → safe to change here
   - Layout hacks (clock, special positioning) → DO NOT put here
   ========================================================================== */


/* ==========================================================================
   1) DESIGN TOKENS  ← 🔥 MOST IMPORTANT SECTION
   --------------------------------------------------------------------------
   These are your GLOBAL STYLE CONTROLS

   If you want to change the entire look of the system:
   👉 THIS is where you do it

   These variables are reused everywhere below
   ========================================================================== */
:root{

  /* Background of whole page */
  --bg: #f5f5f5;

  /* Card / panel background */
  --card: #ffffff;

  /* Light gray sections (hero panels, etc) */
  --muted: #eaeaea;

  /* Borders for cards, tiles, panels */
  --border: #e0e0e0;

  /* Default text color */
  --text: #636363;

  /* SOPHI brand colors (VERY IMPORTANT) */
  --brand:  #9c0829;   /* dark red */
  --brand2: #ca1237;   /* main red */
  --brand3: #8a0624;   /* darker accent */

  /* Shadows (depth feel of UI) */
  --shadow: 0 2px 8px rgba(0,0,0,0.06);
  --shadow2: 0 4px 10px rgba(0,0,0,0.08);

  /* Rounded corners everywhere */
  --radius: 16px;
}


/* ==========================================================================
   2) BASE RESET
   --------------------------------------------------------------------------
   These apply to EVERYTHING on the page
   ========================================================================== */

/* Makes padding + borders behave predictably */
*{ box-sizing:border-box; }

/* Global page styling */
body{
  margin:0;
  padding:0;

  /* System font stack (fast + clean) */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  background: var(--bg);
  color: var(--text);

  /* Line spacing for readability */
  line-height: 1.45;
}

/* IMPORTANT:
   Prevents ugly blue links unless you style them yourself */
a{
  color: inherit;
  text-decoration: none;
}


/* ==========================================================================
   3) PAGE SHELL (main container)
   --------------------------------------------------------------------------
   This is the "card" that wraps your entire dashboard
   ========================================================================== */
.app{
  max-width: 1100px;     /* controls dashboard width */
  margin: 0 auto;        /* centers it */

  background: var(--card);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  border: 1px solid rgba(0,0,0,0.04);

  overflow: visible;
}

/* Inner content padding */
.content{
  padding:16px;
}


/* ==========================================================================
   4) HEADER (TOPBAR)
   --------------------------------------------------------------------------
   This is your red header area
   ========================================================================== */
.topbar{
  position: relative;

  background: var(--brand);   /* main red */
  color:#fff;

  padding:18px 16px 14px;

  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);

  overflow:hidden;

  min-height:220px;   /* IMPORTANT → affects clock spacing */

  border-bottom:4px solid var(--brand2);
}

/* Container inside header */
.topbar-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;

  /* VERY IMPORTANT:
     Leaves space for clock on right side */
  padding-right:220px;
}


/* Branding block (title + subtitle) */
.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

/* Main title */
.brand .title{
  font-weight:900;
  letter-spacing:.05em;
  font-size:1.35rem;
  text-transform:uppercase;
  line-height:1.05;
}

/* Subtitle */
.brand .subtitle{
  opacity:.92;
  font-size:.9rem;
  letter-spacing:.01em;
  line-height:1.2;
}


/* Welcome box */
.welcome{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  font-size:.95rem;

  padding:8px 14px;

  border-radius:6px;

  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);

  max-width:320px;
  text-align:center;
}

/* Bold name inside welcome */
.welcome strong{
  font-weight:800;
}


/* Header button container */
.menu{
  display:flex;
  align-items:center;
  gap:10px;

  flex-wrap:wrap;

  width:100%;
  margin-top:6px;
}


/* ==========================================================================
   5) BUTTON SYSTEM (VERY IMPORTANT)
   --------------------------------------------------------------------------
   ALL buttons inherit from this

   If buttons look wrong → fix here
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 14px;

  border-radius:6px;

  border:1px solid rgba(255,255,255,0.35);

  background:rgba(255,255,255,0.10);

  color:#fff;

  font-weight:700;
  font-size:.9rem;

  cursor:pointer;
  user-select:none;

  white-space:nowrap;

  transition: background .15s ease, border .15s ease, transform .1s ease;
}

/* Hover effect */
.btn:hover{
  background:rgba(255,255,255,0.22);
  border-color:rgba(255,255,255,0.6);
  transform:translateY(-1px);
}

/* Light button (white style) */
.btn.light{
  background:#ffffff;
  color: var(--brand);
  border-color: rgba(255,255,255,0.60);
}

.btn.light:hover,
.btn.light:focus{
  background:#eaeaea !important;
  background-color:#eaeaea !important;
  background-image:none !important;
}


/* ==========================================================================
   6) HERO CARD (top info box)
   ========================================================================== */
.hero{
  background: var(--muted);

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:22px 20px;

  box-shadow:0 2px 6px rgba(0,0,0,0.06);

  margin-bottom:20px;

  border-left:4px solid var(--brand2);
}

/* Title */
.hero h1{
  margin:0 0 8px;
  color:var(--brand);
  font-size:1.6rem;
  font-weight:900;
}

/* Paragraph */
.hero p{
  margin:0;
  color:#444;
  opacity:.9;
  max-width:70ch;
}


/* ==========================================================================
   7) GRID SYSTEM
   --------------------------------------------------------------------------
   Controls layout of tiles
   ========================================================================== */
.grid{
  display:grid;
  gap:18px;

  /* 3 columns desktop */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Tablet → 2 columns */
@media (max-width: 900px){
  .grid{
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

/* Mobile → 1 column */
@media (max-width: 600px){
  .grid{
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   8) TILE / CARD SYSTEM
   --------------------------------------------------------------------------
   These are your main content blocks
   ========================================================================== */
.tile{
  background:#fff;

  border:1px solid var(--border);

  border-radius:12px;

  padding:18px 16px;

  box-shadow:var(--shadow);

  display:flex;
  flex-direction:column;

  gap:12px;

  min-height:160px;

  transition:transform .14s ease, box-shadow .14s ease;
}

/* Hover lift effect */
.tile:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
}

/* Section title */
.tile h2{
  margin:0;
  color:var(--brand);
  font-weight:800;

  border-bottom:2px solid rgba(156,8,41,0.12);
}


/* ==========================================================================
   9) ACTION BUTTON ROW
   ========================================================================== */
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Primary action (red button) */
.cta{
  background: var(--brand2);
  color:#fff;
  font-weight:800;
}

/* Secondary button */
.ghost{
  background:#f7f7f7;
  border:1px solid var(--border);
}


/* ==========================================================================
   10) TOOLTIP SYSTEM
   --------------------------------------------------------------------------
   Used for icon hover hints
   ========================================================================== */


.sophi-tooltip{
  position: relative;
  /* cursor: help; /* shows a tooltip-ish cursor */
}

.sophi-tooltip::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: 140%;
  width: 280px;
  max-width: min(280px, 70vw);

  background: #111;
  color: #fff;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
  border-radius: 10px;

  border: 1px solid #ca1237;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);

  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;

  pointer-events: none;
  z-index: 9999;
  white-space: normal;
}

.sophi-tooltip:hover::after,
.sophi-tooltip:focus::after{
  opacity: 1;
  transform: translateY(0);
}

/* little arrow */
.sophi-tooltip::before{
  content:"";
  position:absolute;
  left: 16px;
  bottom: 128%;
  border: 7px solid transparent;
  border-top-color: #111;
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events:none;
  z-index: 9999;
}

.sophi-tooltip:hover::before,
.sophi-tooltip:focus::before{
  opacity: 1;
}


/* ==========================================================================
   11) MOBILE ADJUSTMENTS
   --------------------------------------------------------------------------
   THIS is where layout tightens up on phones
   ========================================================================== */
@media (max-width:700px){

  .topbar{
    min-height: 250px;
  }

  .menu{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .btn{
    width:100%;
  }
}