/* FONT - Poppins is linked from the page head as a local stylesheet. */


/* GLOBAL RESET */
*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* SCROLLBARS - One treatment for the whole system. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scroll-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
    background-clip: padding-box;
}

/* Where a vertical and a horizontal bar meet - a wide table. */
::-webkit-scrollbar-corner {
    background: transparent;
}


/* CSS VARIABLES */
:root{
    --body-color: rgb(254, 220, 163);
    --sidebar-color: #C47F3E;
    --primary-color: #ECECF0;
    --primary-color-light: #8a5728;
    --toggle-color: #222222;
    --text-color: #e7e6e6;

    --topcontent-color: linear-gradient(160deg, #929292 0%, #c3c6cc 60%, #8f939b 100%);
    --topnav-color: #b8b5b5;

    --table-header-color: #222424;
    --table-header-text: #fcfcfc;
    --table-color: #f2f2f2;
    --table-hover: #d1d2d3;
    --table-background: #e9e7e7;

    /* DARK COLORS */
    --green-color-dark: #155724;
    --red-color-dark: #721c24;
    --blue-color-dark: #2904af;
    --yellow-color-dark: #776f04;
    --gray-color-dark: rgb(85, 85, 85);

    /* LIGHT COLORS */
    --green-color-light: #a6ebb5;
    --red-color-light: #fca5ad;
    --blue-color-light: #7c9bf7;
    --yellow-color-light: rgb(248, 248, 155);
    --gray-color-light: rgb(255, 255, 255);

    /* COLOR HOVER */
    --green-color-hover: #3ae27c;
    --red-color-hover: #f35e70;   
    --blue-color-hover: #3a6ff7;
    --yellow-color-hover: rgb(245, 245, 44);
    --gray-color-hover: rgb(223, 222, 222);

    /* ACCENT COLORS - NEW */
    --accent-purple: #8B5CF6;
    --accent-pink: #EC4899;
    --accent-cyan: #06B6D4;
    --accent-orange: #FF9800;
    --accent-teal: #14B8A6;
    --accent-indigo: #6366F1;

    /* ACCENT LIGHT COLORS - NEW */
    --accent-purple-light: #C4B5FD;
    --accent-pink-light: #FBCFE8;
    --accent-cyan-light: #A5F3FC;
    --accent-orange-light: #FFE0B2;
    --accent-teal-light: #CCFBF1;
    --accent-indigo-light: #C7D2FE;

    /* GRADIENT COLORS - NEW */
    --gradient-sunset: linear-gradient(135deg, #FF9800, #EC4899);
    --gradient-ocean: linear-gradient(135deg, #06B6D4, #0EA5E9);
    --gradient-forest: linear-gradient(135deg, #10B981, #14B8A6);
    --gradient-aurora: linear-gradient(135deg, #8B5CF6, #EC4899);
    --gradient-warm: linear-gradient(135deg, #F97316, #FB923C);

    /* SURFACE TOKENS - shared card/table/typography system. */
    --surface:      #ffffff;
    --surface-soft: #f7f8fa;
    --line:         #e6e8ec;

    --ink:          #1b2028;
    --ink-2:        #5c6472;
    --ink-3:        #8b93a1;

    --brand:        #c47f3e;
    --brand-deep:   #a3652c;
    --brand-soft:   rgba(196, 127, 62, 0.12);

    /* ALERT ACCENTS - The severity colours for the dashboard alert cards. */
    /* POPOVERS - Every panel that floats over the page - the styled dropdowns, the date picker. */
    --pop-radius:  14px;
    --pop-shadow:  0 18px 44px rgba(16, 24, 40, .18),
                   0 2px 6px rgba(16, 24, 40, .06);

    /* SCROLLBARS - Written three separate times, in three files, with the same values. */
    --scroll-thumb:       #cfd4dc;
    --scroll-thumb-hover: #a7aeb9;
    --scroll-track:       transparent;

    /* CHART FILLS - Deliberately NOT the --alert-* tokens below. */
    --chart-present:  #058322;
    --chart-late:     #c28412;
    --chart-absent:   #e50026;
    --chart-overtime: #009fd6;

    /* "Not yet in" - staff with no record today. */
    --chart-none:     #707072;

    --alert-info:    #2563eb;
    --alert-warning: #b45309;
    --alert-danger:  #dc2626;
    --alert-success: #15803d;

    --ring:       0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .07);
    --ring-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 16px 36px rgba(16, 24, 40, .12);

    --radius:    14px;
    --radius-sm: 10px;

    /* SHELL GEOMETRY - The sidebar width is declared once here and read by sidebar.css. */
    --sidebar-w:        300px;
    --sidebar-w-closed: 88px;
    --shell-gap:        20px;

    /* transitions */
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
}


/* BODY */
body{
    background: var(--body-color);
    transition: var(--tran-05);

    /* SELECTION - the chrome is furniture, not text.
       Dragging a finger to scroll a phone kept selecting headings,
       sidebar labels and button text, and the blue wash had to be
       tapped away before the page could be scrolled again. It also
       made copying a real value harder: a drag across a table picked
       up every label it passed on the way.
       The allowlist below puts selection back wherever there is
       something worth copying. user-select inherits, so anything not
       named there is unselectable. */
    -webkit-user-select: none;
    user-select: none;

    /* The grey flash Android and iOS paint over a tapped element. The
       buttons here already have their own :active and :hover states,
       so it only ever arrived late and in the wrong colour. */
    -webkit-tap-highlight-color: transparent;
}

/* ...AND THE DATA IS TEXT.
   Everything a person could reasonably want to copy out of this
   system: a table cell, something they typed, a message somebody
   sent them, a reference they have to quote back. */
td, th,
input, textarea, select, option,
[contenteditable],
.req-message, .req-reply p, .req-subject,
.reference code,
pre, code, kbd {
    -webkit-user-select: text;
    user-select: text;
}

/* A caret cannot be placed where text cannot be selected, so a field
   inside unselectable chrome stops accepting a click in the middle of
   a word. This is not a nicety. */
input, textarea {
    -webkit-user-select: auto;
    user-select: auto;
}

/* js/theme.js marks <html> in the page head, before <body> exists. */
html.dark,
html.dark body { background: #17110c; }


/* DARK MODE VARIABLES */
/* Dark mode is warm, not neutral. */
body.dark{
    --body-color: #17110c;
    --sidebar-color: #241a11;
    --primary-color: #2c221a;
    --primary-color-light: #3a2a1b;
    --toggle-color: #FFF;
    --text-color: #d8cabb;
    --topnav-color: #3d3126;

    /* The header was a light grey chip with dark text. */
    --table-header-color: #2c221a;
    --table-header-text: #f6efe7;
    --table-color: #221a13;
    --table-hover: #33291f;
    --table-background: #1e1710;

    /* SURFACE TOKENS - dark */
    --surface:      #221a13;
    --surface-soft: #2c221a;
    --line:         #3d3126;

    --ink:          #f6efe7;
    --ink-2:        #cdbeae;
    --ink-3:        #a08f7e;

    --brand:        #e0a468;
    --brand-deep:   #c47f3e;
    --brand-soft:   rgba(224, 164, 104, 0.16);

    /* Lifted for dark mode. */
    --pop-shadow:  0 18px 44px rgba(0, 0, 0, .5),
                   0 2px 6px rgba(0, 0, 0, .3);

    --scroll-thumb:       #4a3b2d;
    --scroll-thumb-hover: #63503e;

    --alert-info:    #7cb0ff;
    --alert-warning: #f0b64d;
    --alert-danger:  #f88b7c;
    --alert-success: #64d69a;

    --ring:       0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
    --ring-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .4);
}


/* BACKGROUND ROUND CONTAINER */
.round-container {
  position: fixed;
  top: 0;
  left: -60px;
  right: -60px;
  height: 500px;
  border-bottom-left-radius: 60%;
  border-bottom-right-radius: 60%;
  /* Soft warm wash instead of the old heavy black inset shadow. */
  background-image: linear-gradient(170deg,
                    var(--primary-color) 0%,
                    var(--primary-color) 55%,
                    rgba(196, 127, 62, 0.10) 100%);
  background-color: var(--primary-color);
  box-shadow: 0 18px 40px rgba(94, 60, 25, 0.10);
  z-index: -1;
  transition: var(--tran-05);
}

body.dark .round-container {
  background-image: linear-gradient(170deg, #3A3B3C 0%, #313233 60%, #2b2c2d 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* MAIN DASHBOARD */
.dashboard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: calc(var(--sidebar-w, 300px) + var(--shell-gap, 20px));
  padding: 24px;
  /* Frosted white instead of the old grey veil, which turned muddy over the warm background. */
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(94, 60, 25, 0.10);
  transition: var(--tran-05);
}

body.dark .dashboard {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3);
}

.sidebar.close ~ .dashboard{
  margin-left: calc(var(--sidebar-w-closed, 88px) + var(--shell-gap, 20px));
}

/* Responsive dashboard margin adjustments */
@media (max-width: 1100px) {
  /* Clears the top bar. */
  .dashboard {
    margin-top: 95px;
  }
}

@media (max-width: 768px) {
  .dashboard {
    margin-top: 90px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 15px;
  }

  .sidebar.close ~ .dashboard {
    margin-left: 20px;
  }
}

@media (max-width: 480px) {
  .dashboard {
    margin-top: 80px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
  }
}
/* ── Buttons that are waiting on the server ───────────────────────────── Set by busy.js. */
.is-busy,
button[aria-busy="true"] {
  opacity: 0.65;
  cursor: progress;
  pointer-events: none;
}

/* SWITCHING THEME - The new theme arrives as a circle growing from the switch instead. */
html.is-sweeping::view-transition-old(root),
html.is-sweeping::view-transition-new(root) {
  /* The browser's default is to cross-fade the two photographs. */
  animation: none;
  mix-blend-mode: normal;
}

html.is-sweeping::view-transition-new(root) {
  z-index: 1;
  animation: theme-sweep .45s cubic-bezier(.22, .61, .36, 1);
}

@keyframes theme-sweep {
  from {
    clip-path: circle(0 at var(--theme-origin-x, 100%) var(--theme-origin-y, 0));
  }
  to {
    clip-path: circle(var(--theme-reach, 150vmax)
                      at var(--theme-origin-x, 100%) var(--theme-origin-y, 0));
  }
}

/* theme.js does not start a transition at all when this is set, so these rules are belt. */
@media (prefers-reduced-motion: reduce) {
  html.is-sweeping::view-transition-old(root),
  html.is-sweeping::view-transition-new(root) {
    animation: none;
  }
}

/* ── Kung saan nakaposisyon ang mukha sa isang larawan ───────────────── Every photograph. */
.id-photo img,          /* ang larawan sa ID card */
.avatar,                /* profile ng empleyado */
.admin-avatar,          /* profile ng admin sa Settings */
.profile-pic,           /* maliit na larawan sa itaas na bar */
.activity-avatar img,   /* kamakailang tap sa RFID scanner */
.modal .photo-preview { /* preview kapag nag-upload */
  object-position: 50% 28%;
}