/* =========================================================
   FloatCrew — design system based on floatmap.com identity
   ========================================================= */

:root {
  /* Brand */
  /* Official floatmap palette (from the brand logo files) */
  --ink:          #222222;   /* charcoal */
  --ink-2:        #2E2E2E;
  --ink-3:        #3D3D3D;
  --teal:         #0A6268;   /* deep teal — primary */
  --teal-dark:    #074A4F;
  --teal-soft:    #E1F0F1;
  --cyan:         #67C5D8;   /* sky cyan — accent on dark */
  --cyan-dark:    #3FA9BF;
  --cyan-soft:    #E4F5F9;
  --coral:        #E8553E;   /* coral — secondary accent */
  --coral-dark:   #C9432E;
  --coral-soft:   #FDEDEA;

  /* Neutrals */
  --bg:           #F6F6F4;
  --surface:      #FFFFFF;
  --border:       #E6E7E4;
  --text:         #1E2121;
  --text-muted:   #6B7070;
  --text-on-dark: #F2F2F0;
  --muted-on-dark:#9AA0A0;

  /* Status */
  --success: #1F8A5B;  --success-soft: #E4F4EC;
  --warning: #B7791F;  --warning-soft: #FBF1DE;
  --danger:  #C53030;  --danger-soft:  #FBE6E6;
  --info:    #2B6CB0;  --info-soft:    #E4EEF9;

  /* Shape & type */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(30, 33, 33, .06);
  --shadow:    0 6px 24px rgba(30, 33, 33, .08);
  --font: "Readex Pro", "Segoe UI", Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }

h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -.2em; }

/* ---------- Layout: top navigation ---------- */
.container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 2rem; }

.appbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  color: var(--text-on-dark);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}
.appbar-inner { display: flex; align-items: center; gap: 1.25rem; height: 64px; }

.brand {
  display: flex; align-items: center; gap: .6rem;
  color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em;
  white-space: nowrap; flex-shrink: 0;
}
.brand img { width: 30px; height: 30px; }
.brand small { display: block; font-size: .68rem; font-weight: 400; color: var(--muted-on-dark); letter-spacing: 0; }
.brand:hover { color: #fff; }

.mainnav { display: flex; align-items: center; gap: .25rem; flex: 1; min-width: 0; }
.nav-link {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 40px; padding: 0 .85rem;
  color: var(--text-on-dark); background: none; border: 0;
  border-radius: var(--radius);
  font: inherit; font-size: .9rem; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-link:hover, .nav-dd.open > .nav-link { background: var(--ink-2); color: #fff; }
.nav-link.active { background: var(--cyan); color: var(--ink); }
.nav-link .caret { width: .8em; height: .8em; opacity: .7; transition: transform .2s; }
.nav-dd.open > .nav-link .caret { transform: rotate(180deg); }

.nav-dd { position: relative; }
.dd-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0;
  min-width: 220px; padding: .4rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 60;
}
.dd-menu.dd-end { inset-inline-start: auto; inset-inline-end: 0; }
.nav-dd.open > .dd-menu { display: block; }
.dd-menu a {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .75rem; border-radius: var(--radius-sm);
  color: var(--text); font-size: .9rem; white-space: nowrap;
}
.dd-menu a:hover { background: var(--bg); color: var(--text); }
.dd-menu a.active { background: var(--teal-soft); color: var(--teal); font-weight: 500; }
.dd-menu a .icon { color: var(--text-muted); }
.dd-menu a.active .icon { color: var(--teal); }
.dd-head { padding: .6rem .75rem .7rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; font-size: .9rem; }
.dd-head span { display: block; color: var(--text-muted); font-size: .78rem; }
.dd-sep { height: 1px; background: var(--border); margin: .3rem 0; }

.appbar-end { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; flex-shrink: 0; }
.user-btn { padding-inline: .4rem .7rem; }
.user-btn .avatar { width: 32px; height: 32px; font-size: .8rem; background: var(--cyan); color: var(--ink); }

.menu-toggle {
  display: none; width: 42px; height: 42px;
  place-items: center;
  background: var(--ink-2); color: #fff; border: 0; border-radius: var(--radius);
  font-size: 1.25rem; cursor: pointer;
}

.page-bar { background: var(--surface); border-bottom: 1px solid var(--border); }
.page-bar .container { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.page-bar h1 { margin: 0; font-size: 1.25rem; flex: 1; }
.page-bar .today { color: var(--text-muted); font-size: .85rem; white-space: nowrap; }

.content { padding-block: 1.75rem; flex: 1; }
.footer { padding-block: 1rem 1.5rem; font-size: .8rem; color: var(--text-muted); }
.app { min-height: 100vh; display: flex; flex-direction: column; }

.backdrop { display: none; }

/* ---------- Page header ---------- */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-head p { margin: 0; color: var(--text-muted); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-body { padding: 1.5rem; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.card-head h2, .card-head h3 { margin: 0; }

.grid { display: grid; gap: 1.25rem; }
.grid > *, .stats > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: 2fr 1fr; }
.stats { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.5rem; }

.stat {
  padding: 1.35rem 1.5rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.stat .label { color: var(--text-muted); font-size: .85rem; }
.stat .value { font-size: 2rem; font-weight: 600; line-height: 1.2; margin-top: .35rem; }
.stat .ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--cyan-soft); color: var(--teal);
  font-size: 1.25rem;
}
.stat.teal .ico { background: var(--teal-soft); color: var(--teal); }
.stat.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.stat.dark .label { color: var(--muted-on-dark); }
.stat.dark .ico { background: var(--ink-2); color: var(--cyan); }

/* Hero (dark band, like the floatmap site sections) */
.hero {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  background-image: radial-gradient(circle at 12% 130%, rgba(103, 197, 216, .28), transparent 45%);
}
.hero h2 { font-size: 1.5rem; margin-bottom: .25rem; }
.hero p { margin: 0; color: var(--muted-on-dark); }
.hero .clock { font-size: 2.2rem; font-weight: 300; letter-spacing: .02em; direction: ltr; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--teal);
  color: #fff;
  font: inherit; font-size: .9rem; font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { background: var(--teal-dark); color: #fff; }
/* primary call-to-action */
.btn-coral { background: var(--teal); }
.btn-coral:hover { background: var(--teal-dark); }
.btn-outline { background: transparent; color: var(--coral); border-color: var(--coral); }
.btn-outline:hover { background: var(--coral-soft); color: var(--coral-dark); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #a32626; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--cyan); color: var(--ink); }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }
.btn-lg { padding: .85rem 1.6rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted);
  cursor: pointer;
}
.icon-btn:hover { color: var(--teal); border-color: var(--teal); }
.icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); }

.actions { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.actions form { margin: 0; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 1.1rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .35rem; }
.field .hint { font-size: .78rem; color: var(--text-muted); margin-top: .25rem; }
.req::after { content: " *"; color: var(--coral); }

.input, select.input, textarea.input {
  width: 100%;
  padding: .62rem .85rem;
  font: inherit; font-size: .92rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
textarea.input { min-height: 96px; resize: vertical; }
.input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
input[type="date"].input, input[type="time"].input, input[type="number"].input { direction: ltr; text-align: end; }

.form-actions { display: flex; gap: .75rem; justify-content: flex-start; margin-top: 1.5rem; }

.filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.filters .input { width: auto; min-width: 160px; }
.search { position: relative; }
.search .icon { position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search .input { padding-inline-start: 2.3rem; min-width: 240px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
  text-align: start; font-weight: 500; font-size: .8rem;
  color: var(--text-muted);
  background: #FAFAF8;
  padding: .8rem 1.25rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td { padding: .85rem 1.25rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #FBFBFA; }
.table td.ltr { white-space: nowrap; }
.table .num { direction: ltr; text-align: end; font-variant-numeric: tabular-nums; }

.person { display: flex; align-items: center; gap: .75rem; }
.person .name { font-weight: 500; }
.person small { display: block; color: var(--text-muted); font-size: .78rem; }

.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--cyan-soft); color: var(--teal);
  font-weight: 600; font-size: .85rem;
}
.avatar.lg { width: 72px; height: 72px; font-size: 1.5rem; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 500;
  white-space: nowrap;
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-info    { background: var(--info-soft);    color: var(--info); }
.badge-primary { background: var(--teal-soft);    color: var(--teal); }
.badge-muted   { background: #EFEFEC;             color: var(--text-muted); }

/* ---------- Alerts ---------- */
.alert {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: .9rem;
  border: 1px solid transparent;
}
.alert-success { background: var(--success-soft); color: var(--success); border-color: #c4e6d4; }
.alert-error   { background: var(--danger-soft);  color: var(--danger);  border-color: #f2c7c7; }
.alert-info    { background: var(--info-soft);    color: var(--info);    border-color: #c8dbf1; }

/* ---------- Misc ---------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state h2 { color: var(--text); }
.muted { color: var(--text-muted); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.mt-0 { margin-top: 0; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.5rem; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }

.dl { display: grid; grid-template-columns: max-content 1fr; gap: .7rem 1.5rem; margin: 0; }
.dl dt { color: var(--text-muted); font-size: .85rem; }
.dl dd { margin: 0; font-weight: 500; }

.section-title { color: var(--teal); font-size: .8rem; font-weight: 500; letter-spacing: .04em; margin-bottom: .35rem; }

.pagination { display: flex; gap: .35rem; justify-content: center; padding: 1rem; }
.pagination a, .pagination span {
  min-width: 34px; height: 34px; padding: 0 .6rem;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  color: var(--text); font-size: .85rem;
}
.pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Auth (login) ---------- */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-side {
  background: var(--ink);
  color: #fff;
  padding: 3rem;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  background-image:
    radial-gradient(circle at 80% 110%, rgba(103, 197, 216, .30), transparent 50%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}
.auth-side .brand { padding: 0; font-size: 1.4rem; }
.auth-side h2 { font-size: 2.6rem; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; margin: 0; }
.auth-side h2 span { color: var(--cyan); }
.auth-side p { color: var(--muted-on-dark); max-width: 420px; }
.auth-form { display: grid; place-items: center; padding: 2rem; background: var(--surface); }
.auth-form .box { width: 100%; max-width: 380px; }
.auth-form h1 { font-size: 1.75rem; }
.auth-form .field { margin-bottom: 1.1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 1280px) {
  .user-btn .user-name { display: none; }
  .nav-link { padding: 0 .65rem; }
}

/* Tablet & phone: navigation becomes a drop-down panel */
@media (max-width: 1100px) {
  .menu-toggle { display: inline-grid; }
  .mainnav {
    display: none;
    position: fixed; inset-inline: 0; top: 64px; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .75rem 1rem 2rem;
    background: var(--ink);
    overflow-y: auto;
    z-index: 55;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .mainnav { display: flex; }
  .mainnav .nav-link { width: 100%; height: 48px; font-size: 1rem; }
  .mainnav .nav-dd > .nav-link { pointer-events: none; color: var(--muted-on-dark); font-size: .8rem; height: 36px; margin-top: .5rem; background: none; }
  .mainnav .nav-dd > .nav-link .caret { display: none; }
  .mainnav .nav-dd > .dd-menu {
    display: block; position: static; min-width: 0;
    background: none; border: 0; box-shadow: none; padding: 0 0 0 0;
  }
  .mainnav .dd-menu a { color: var(--text-on-dark); height: 48px; font-size: 1rem; padding-inline: 1.25rem; }
  .mainnav .dd-menu a .icon { color: var(--muted-on-dark); }
  .mainnav .dd-menu a:hover { background: var(--ink-2); color: #fff; }
  .mainnav .dd-menu a.active { background: var(--cyan); color: var(--ink); }
  .mainnav .dd-menu a.active .icon { color: var(--ink); }
}

@media (max-width: 860px) {
  .container { padding-inline: 1rem; }
  .appbar-inner { gap: .75rem; }
  .brand small { display: none; }
  .page-bar .container { min-height: 54px; }
  .page-bar h1 { font-size: 1.1rem; }
  .page-bar .today { display: none; }
  .content { padding-block: 1.25rem; }
  .grid-2, .form-grid { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth-side { padding: 2rem 1.5rem; gap: 2rem; }
  .auth-side h2 { font-size: 1.8rem; }
  .search .input, .filters .input { min-width: 0; width: 100%; }
  .filters > * { flex: 1 1 100%; }
  .hero { padding: 1.35rem 1.25rem; }
  .hero h2 { font-size: 1.25rem; }
  .hero .clock { font-size: 1.6rem; }
  .page-head > .actions, .page-head > form.actions { width: 100%; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs a { white-space: nowrap; }
}

/* Phones: tables turn into cards (labels added by app.js) */
@media (max-width: 640px) {
  .table:not(.no-stack) thead { display: none; }
  .table:not(.no-stack), .table:not(.no-stack) tbody, .table:not(.no-stack) tfoot,
  .table:not(.no-stack) tr, .table:not(.no-stack) td { display: block; width: 100%; }
  .table:not(.no-stack) tr { padding: .5rem 0; border-bottom: 1px solid var(--border); }
  .table:not(.no-stack) tbody tr:hover { background: none; }
  .table:not(.no-stack) td {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .4rem 1.1rem; border: 0; text-align: start;
  }
  .table:not(.no-stack) td[data-label]::before {
    content: attr(data-label);
    color: var(--text-muted); font-size: .78rem; font-weight: 400; flex-shrink: 0;
  }
  .table:not(.no-stack) td:first-child { font-weight: 500; padding-top: .6rem; }
  .table:not(.no-stack) td:first-child::before { display: none; }
  .table:not(.no-stack) td:empty { display: none; }
  .table:not(.no-stack) td.num { justify-content: space-between; }
  .table:not(.no-stack) td .actions { margin-inline-start: auto; }
  .table:not(.no-stack) tfoot tr { background: #FAFAF8; }
  .table-wrap { overflow-x: visible; }
  .table .input-sm { width: 120px; }
}

@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
  .card-body { padding: 1.1rem; }
  .card-head { padding: 1rem 1.1rem; flex-wrap: wrap; }
  .table th, .table td { padding: .7rem .9rem; }
}

@media print {
  .appbar, .page-bar, .page-head .btn, .actions, .footer { display: none !important; }
}

/* ---------- v1.0 additions ---------- */
.mb { margin-bottom: 1.25rem; }
.stack { display: grid; gap: 1rem; }
.stack .form-grid { gap: 1rem; }
.check { display: flex; align-items: center; gap: .55rem; font-size: .9rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--teal); }

.tabs {
  display: flex; gap: .25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.tabs a {
  padding: .7rem 1.1rem; color: var(--text-muted); font-size: .9rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--teal); border-bottom-color: var(--teal); font-weight: 500; }

.id-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,.1); color: #fff;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.id-chip.sm { background: var(--ink); padding: .15rem .6rem; font-size: .8rem; min-width: 2.2rem; justify-content: center; }
.file-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); flex-shrink: 0; }

.notice {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem 1.25rem; border-radius: var(--radius);
  background: var(--warning-soft); color: #7a5414; font-size: .88rem;
  margin-bottom: 1.25rem;
}
.notice .icon { margin-top: .15rem; }
.notice.info { background: var(--info-soft); color: var(--info); }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.kv div { background: var(--bg); border-radius: var(--radius); padding: .85rem 1rem; }
.kv span { display: block; color: var(--text-muted); font-size: .78rem; }
.kv strong { font-size: 1.1rem; font-weight: 600; }

.table input.input-sm { width: 84px; padding: .35rem .5rem; font-size: .85rem; direction: ltr; text-align: end; }
.table tfoot td { font-weight: 600; background: #FAFAF8; }
.neg { color: var(--danger); }
.pos { color: var(--success); }

.payslip { max-width: 780px; margin: 0 auto; }
.payslip-head { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 3px solid var(--teal); }
.payslip-head .brand { color: var(--ink); padding: 0; }
.payslip-head .brand small { color: var(--text-muted); }
.payslip table.table td, .payslip table.table th { padding: .55rem 1rem; }
.payslip .net { background: var(--ink); color: #fff; display: flex; justify-content: space-between; padding: 1rem 1.5rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg); font-size: 1.15rem; }

@media print {
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
  .tabs, .no-print { display: none !important; }
  .content { padding: 0; }
}

/* ---------- Brand logo ---------- */
.logo { display: block; color: inherit; }
.logo svg { display: block; height: 100%; width: auto; }
.brand .logo-full { height: 26px; color: var(--cyan); }
.brand .logo-mark { height: 30px; color: var(--cyan); display: none; }
.brand .app-tag {
  padding-inline-start: .75rem; margin-inline-start: .15rem;
  border-inline-start: 1px solid var(--ink-3);
  font-size: .82rem; font-weight: 500; color: var(--text-on-dark); line-height: 1.2;
}
.brand .app-tag small { display: block; font-size: .68rem; font-weight: 400; color: var(--muted-on-dark); }
.auth-side .logo-full { height: 40px; color: var(--cyan); }
.auth-watermark { position: absolute; inset-inline-end: -60px; bottom: -70px; height: 420px; color: rgba(103, 197, 216, .07); pointer-events: none; }
.auth-form .logo-mark { height: 48px; color: var(--teal); margin-bottom: 1.25rem; }
.payslip-head .logo-full { height: 30px; color: var(--teal); }
@media (max-width: 1280px) { .brand .app-tag { display: none; } }
@media (max-width: 520px) { .brand .logo-full { display: none; } .brand .logo-mark { display: block; } }
@media print { .payslip-head .logo-full { color: #0A6268 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

img.avatar { object-fit: cover; padding: 0; background: var(--bg); }
.avatar.xl { width: 112px; height: 112px; font-size: 2.2rem; border: 4px solid rgba(255,255,255,.12); }

/* ---------- v1.2: profile 360, online punch, visits ---------- */
.profile-hero .person { align-items: center; gap: 1.25rem; }
.photo-wrap { position: relative; flex-shrink: 0; }
.photo-form { position: absolute; bottom: 2px; inset-inline-end: 2px; margin: 0; }
.photo-btn {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--cyan); color: var(--ink); border: 3px solid var(--ink);
}
.photo-btn:hover { background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: .78rem; }
.day-pill { padding: .35rem .75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.day-pill:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
.loc-link { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cyan-soft); color: var(--teal); vertical-align: middle; }
.loc-link:hover { background: var(--teal); color: #fff; }
.loc-link .icon { width: 14px; height: 14px; }

.punch-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.punch-card { padding: 2rem 1.5rem; text-align: center; }
.punch-clock { font-size: 2.6rem; font-weight: 300; direction: ltr; }
.punch-btn {
  width: 190px; height: 190px; margin: 1.25rem auto .75rem; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: .5rem;
  border: 0; cursor: pointer; font: inherit; font-size: 1.1rem; font-weight: 600;
  background: var(--teal); color: #fff;
  box-shadow: 0 0 0 10px var(--teal-soft), 0 12px 30px rgba(10, 98, 104, .35);
  transition: transform .15s, background .15s;
}
.punch-btn .icon { width: 56px; height: 56px; }
.punch-btn:hover { transform: scale(1.03); background: var(--teal-dark); }
.punch-btn.out { background: var(--ink); box-shadow: 0 0 0 10px var(--cyan-soft), 0 12px 30px rgba(34, 34, 34, .3); }
.punch-btn[disabled] { opacity: .6; cursor: wait; }
.geo-status { font-size: .85rem; }
@media (max-width: 860px) {
  .punch-wrap { grid-template-columns: 1fr; }
  .profile-hero .person { flex-direction: column; text-align: center; }
  .profile-hero .chips { justify-content: center; }
}

.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem; }
.footer .credit { color: var(--text-muted); letter-spacing: .01em; }

/* ---------- v1.4: languages ---------- */
.lang-switch { position: absolute; top: 1.25rem; inset-inline-end: 1.5rem; }
.lang-switch a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: .85rem; }
.lang-switch a:hover { border-color: var(--teal); color: var(--teal); }
.auth-form { position: relative; }
[dir="ltr"] .auth-side h2 { letter-spacing: -.03em; }
[dir="ltr"] body { font-size: 14.5px; }