/* Hyper Tracker — Hyper Design clean-modern layer on top of Bootstrap 5 RTL. */
:root {
  /* Brand: the same green as the desktop app and the logo. */
  --hd-primary: #0F8B78;
  --hd-primary-dark: #0B6E5F;
  --hd-primary-soft: #DDF1EC;
  --hd-secondary: #10B981;
  --hd-dark: #0F172A;
  --hd-body: #475569;
  --hd-muted: #94A3B8;
  --hd-bg: #F6F7FB;
  --hd-surface: #FFFFFF;
  --hd-border: #E2E8F0;

  --hd-radius: 12px;
  --hd-radius-sm: 8px;
  --hd-shadow: 0 4px 20px rgba(15, 23, 42, .06);
  --hd-font: 'Cairo', system-ui, sans-serif;
  --hd-sidebar: 248px;

  --bs-body-font-family: var(--hd-font);
  --bs-body-color: var(--hd-body);
  --bs-body-bg: var(--hd-bg);
  --bs-border-color: var(--hd-border);
  --bs-border-radius: var(--hd-radius-sm);
  --bs-border-radius-lg: var(--hd-radius);
  --bs-primary: var(--hd-primary);
  --bs-primary-rgb: 15, 139, 120;
  --bs-link-color: var(--hd-primary);
  --bs-link-color-rgb: 15, 139, 120;
  --bs-link-hover-color: var(--hd-primary-dark);
}

body { background: var(--hd-bg); font-size: .95rem; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--hd-dark); font-weight: 700; }
.page-title { font-size: 1.5rem; margin: 0; }
.text-muted { color: var(--hd-muted) !important; }
.tabular { font-variant-numeric: tabular-nums; }

/* Layout */
.app-sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--hd-sidebar);
  background: var(--hd-dark); color: #CBD5E1; padding: 1.25rem .875rem; overflow-y: auto; z-index: 1030;
}
.app-brand { display: flex; align-items: center; gap: .625rem; color: #fff; font-weight: 700; font-size: 1.125rem; padding: .25rem .5rem 1.25rem; text-decoration: none; }
.app-brand .logo { width: 36px; height: 36px; border-radius: 10px; background: var(--hd-primary); display: grid; place-items: center; color: #fff; }
.app-nav .nav-section { font-size: .75rem; color: #64748B; padding: 1rem .75rem .375rem; }
.app-nav .nav-link { color: #CBD5E1; border-radius: var(--hd-radius-sm); padding: .55rem .75rem; display: flex; align-items: center; gap: .625rem; }
.app-nav .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.app-nav .nav-link.active { background: var(--hd-primary); color: #fff; }
.app-nav .nav-link .bi { font-size: 1.05rem; }
.app-main { margin-inline-start: var(--hd-sidebar); min-height: 100vh; }
.app-topbar { background: var(--hd-surface); border-bottom: 1px solid var(--hd-border); padding: .75rem 1.5rem; position: sticky; top: 0; z-index: 1020; }
.app-content { padding: 1.5rem; }
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(100%); transition: transform .2s; }
  .app-sidebar.show { transform: none; }
  .app-main { margin-inline-start: 0; }
  .app-content { padding: 1rem; }
}

/* Surfaces */
.card { border: 1px solid var(--hd-border); border-radius: var(--hd-radius); box-shadow: var(--hd-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--hd-border); padding: .875rem 1.25rem; font-weight: 700; color: var(--hd-dark); }
.card-body { padding: 1.25rem; }
.stat { display: flex; align-items: center; gap: 1rem; }
.stat .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--hd-primary-soft); color: var(--hd-primary); font-size: 1.25rem; }
.stat .value { font-size: 1.5rem; font-weight: 700; color: var(--hd-dark); line-height: 1.1; }
.stat .label { font-size: .8rem; color: var(--hd-muted); }

/* Tables */
.table { --bs-table-bg: transparent; margin: 0; }
.table > thead th { font-size: .78rem; font-weight: 600; color: var(--hd-muted); background: #F8FAFC; border-bottom-width: 1px; white-space: nowrap; }
.table > :not(caption) > * > * { padding: .75rem 1rem; vertical-align: middle; }

/* Buttons & forms */
.btn { --bs-btn-border-radius: var(--hd-radius-sm); --bs-btn-font-weight: 600; --bs-btn-padding-x: 1rem; }
.btn-primary {
  --bs-btn-bg: var(--hd-primary); --bs-btn-border-color: var(--hd-primary);
  --bs-btn-hover-bg: var(--hd-primary-dark); --bs-btn-hover-border-color: var(--hd-primary-dark);
  --bs-btn-active-bg: var(--hd-primary-dark); --bs-btn-active-border-color: var(--hd-primary-dark);
  --bs-btn-disabled-bg: var(--hd-primary); --bs-btn-disabled-border-color: var(--hd-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--hd-primary); --bs-btn-border-color: var(--hd-primary);
  --bs-btn-hover-bg: var(--hd-primary); --bs-btn-hover-border-color: var(--hd-primary);
  --bs-btn-active-bg: var(--hd-primary-dark);
}
.btn-soft { background: var(--hd-primary-soft); color: var(--hd-primary); border: 0; }
.btn-soft:hover { background: var(--hd-primary); color: #fff; }
.form-control, .form-select { border-radius: var(--hd-radius-sm); border-color: var(--hd-border); padding: .55rem .85rem; }
/* Keep Bootstrap's room for the select arrow (start/end follow RTL and LTR). */
.form-select { padding-inline-end: 2.25rem; }
.form-select-sm { padding-inline-end: 2rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--hd-primary); box-shadow: 0 0 0 .2rem rgba(15, 139, 120, .15); }
.form-check-input:checked { background-color: var(--hd-primary); border-color: var(--hd-primary); }
.form-label { font-weight: 600; color: var(--hd-dark); font-size: .875rem; }

/* Badges */
.badge { font-weight: 600; padding: .4em .7em; border-radius: 999px; }
.badge-soft-primary { background: var(--hd-primary-soft); color: var(--hd-primary); }
.badge-soft-success { background: #ECFDF5; color: #047857; }
.badge-soft-warning { background: #FFFBEB; color: #B45309; }
.badge-soft-danger { background: #FEF2F2; color: #B91C1C; }
.badge-soft-secondary { background: #F1F5F9; color: #475569; }
.badge-soft-info { background: #F0F9FF; color: #0369A1; }
.badge-soft-dark { background: #E2E8F0; color: #0F172A; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Avatars */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--hd-primary-soft); color: var(--hd-primary); display: inline-grid; place-items: center; font-weight: 700; flex-shrink: 0; }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr)); gap: 1rem; overflow-x: auto; }
.kanban-col { background: #EEF0F6; border-radius: var(--hd-radius); padding: .75rem; min-height: 120px; }
.kanban-col h6 { font-size: .85rem; margin-bottom: .75rem; }
.task-card { background: var(--hd-surface); border-radius: var(--hd-radius-sm); padding: .75rem; box-shadow: 0 1px 3px rgba(15,23,42,.06); margin-bottom: .625rem; }
.task-card .title { font-weight: 600; color: var(--hd-dark); }

/* Progress / activity */
.progress { height: 8px; border-radius: 999px; background: #EEF0F6; }
.slot-strip { display: flex; gap: 2px; flex-wrap: wrap; }
.slot-strip .slot { width: 14px; height: 22px; border-radius: 3px; background: #E2E8F0; }

/* Screenshots */
.shot { display: block; border-radius: var(--hd-radius-sm); overflow: hidden; border: 1px solid var(--hd-border); aspect-ratio: 16 / 10; background: #F1F5F9; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot-wrap { position: relative; }
.shot-del {
    position: absolute; top: 6px; inset-inline-end: 6px; width: 30px; height: 30px; border: 0; border-radius: 8px;
    display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: #DC2626;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .2); opacity: 0; transition: opacity .15s;
}
.shot-wrap:hover .shot-del, .shot-del:focus-visible { opacity: 1; }
@media (hover: none) { .shot-del { opacity: 1; } }

/* Auth */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(circle at 20% 0%, #DDF1EC 0, transparent 45%), var(--hd-bg); }
.auth-card { width: 100%; max-width: 420px; }

.timer-live { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--hd-dark); }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--hd-muted); }
.empty .bi { font-size: 2rem; display: block; margin-bottom: .5rem; }

/* Notifications */
.notif-badge { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #DC2626; color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
.notif-menu { width: 380px; max-width: calc(100vw - 24px); }
.notif-item { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--hd-border); }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: #F8FAFC; }
.notif-item.unread .notif-title { font-weight: 600; color: var(--hd-dark); }
.notif-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; opacity: .85; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hd-primary); margin-top: .4rem; flex-shrink: 0; }

/* Real-time monitoring */
.rt-counts { display: flex; flex-wrap: wrap; gap: 0; }
.rt-counts > a { flex: 1; min-width: 110px; padding: .25rem 1rem; border-inline-start: 1px solid var(--hd-border); color: inherit; }
.rt-counts > a:first-child { border-inline-start: 0; }
.rt-counts > a:hover { background: #F8FAFC; border-radius: 8px; }
.rt-counts .value { font-size: 1.5rem; font-weight: 700; color: var(--hd-dark); }
.rt-status { display: inline-block; min-width: 96px; text-align: center; padding: .3rem .75rem; border-radius: 999px; color: #fff; font-weight: 600; font-size: .8rem; }
.rt-online { background: #22C55E; } .rt-break { background: #F59E0B; } .rt-offline { background: #CBD5E1; color: #fff; }
.rt-absent { background: #EF4444; } .rt-leave { background: #6366F1; }

/* Tasks board */
.board-wrap { display: flex; gap: 1rem; align-items: flex-start; }
.board-projects { width: 240px; flex-shrink: 0; }
.board-projects .list-group-item { display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: var(--hd-radius-sm); }
.board-projects .list-group-item.active { background: var(--hd-primary-soft); color: var(--hd-primary); font-weight: 600; }
.board-main { flex: 1; min-width: 0; }
.task-card .meta { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .78rem; color: #64748B; margin-top: .4rem; }
.mini-avatars { display: flex; }
.mini-avatars .avatar { width: 24px; height: 24px; font-size: .7rem; margin-inline-start: -6px; border: 2px solid #fff; }
.mini-avatars .avatar:first-child { margin-inline-start: 0; }
@media (max-width: 991.98px) { .board-wrap { flex-direction: column; } .board-projects { width: 100%; } }

/* Project groups */
.pg-drop { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 56px; padding: .5rem; border-radius: var(--hd-radius-sm); border: 1.5px dashed transparent; transition: border-color .15s, background .15s; }
.pg-drop.over { border-color: var(--hd-primary); background: var(--hd-primary-soft); }
.pg-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: 8px; background: var(--hd-surface); border: 1px solid var(--hd-border); box-shadow: 0 1px 2px rgba(15,23,42,.06); cursor: grab; user-select: none; color: var(--hd-dark); font-size: .9rem; }
.pg-chip:hover { border-color: var(--hd-primary); }
.pg-chip.dragging, .pg-group.dragging { opacity: .4; }
.pg-chip .bi { color: #94A3B8; }
.pg-handle { cursor: grab; color: #94A3B8; padding: 0 .25rem; }
.pg-new { border-style: dashed; }
.pg-free { position: sticky; top: 1rem; }
.group-label { font-size: .7rem; text-transform: none; color: #94A3B8; padding: .5rem .75rem .15rem; }

/* Formatted task descriptions */
.rich-text { line-height: 1.75; overflow-wrap: anywhere; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p, .rich-text li, .rich-text h2, .rich-text h3, .rich-text h4, .rich-text blockquote { unicode-bidi: plaintext; }
.rich-text h2 { font-size: 1.25rem; } .rich-text h3 { font-size: 1.1rem; } .rich-text h4 { font-size: 1rem; }
.rich-text h2, .rich-text h3, .rich-text h4 { font-weight: 700; color: var(--hd-dark); margin: 1rem 0 .5rem; }
.rich-text ul, .rich-text ol { padding-inline-start: 1.5rem; }
.rich-text blockquote { border-inline-start: 3px solid #CBD5E1; padding-inline-start: .75rem; color: #475569; }
.rich-text pre { background: #F1F5F9; padding: .75rem; border-radius: 8px; direction: ltr; text-align: left; white-space: pre-wrap; }
.rich-text table { border-collapse: collapse; margin-bottom: 1rem; }
.rich-text th, .rich-text td { border: 1px solid var(--hd-border); padding: .35rem .6rem; }
.tox-tinymce { border-radius: var(--hd-radius-sm) !important; }

/* Status dropdown on task cards: wide enough for the longest status, arrow clear of the text */
.status-select { width: auto; min-width: 142px; flex-shrink: 0; padding-top: .2rem; padding-bottom: .2rem; font-size: .8rem; }
.min-w-0 { min-width: 0; }

/* Attendance */
.att-grid th, .att-grid td { white-space: nowrap; }
.att-name { position: sticky; inset-inline-start: 0; background: var(--hd-surface); z-index: 1; min-width: 150px; }
.att-cell { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; font-size: .7rem; font-weight: 700; color: #fff; }
.att-success { background: #22C55E; } .att-warning { background: #F59E0B; } .att-danger { background: #EF4444; }
.att-info { background: #6366F1; } .att-primary { background: #0EA5E9; } .att-secondary { background: #94A3B8; }
.att-light { background: #E2E8F0; color: #64748B; } .att-white { background: transparent; border: 1px dashed #E2E8F0; }
.att-late { position: absolute; top: -3px; inset-inline-end: -3px; width: 9px; height: 9px; border-radius: 50%; background: #DC2626; border: 2px solid #fff; }

.mention { color: var(--hd-primary); font-weight: 600; background: var(--hd-primary-soft); border-radius: 4px; padding: 0 3px; }

/* Both directions */
html[dir="rtl"] .ltr-value { text-align: right; }
html[dir="ltr"] .ltr-value { text-align: left; }
@media (max-width: 991.98px) { html[dir="ltr"] .app-sidebar { transform: translateX(-100%); } html[dir="ltr"] .app-sidebar.show { transform: none; } }

/* Bootstrap utilities that hard-code its blue. */
.bg-primary { background-color: var(--hd-primary) !important; }
.text-primary { color: var(--hd-primary) !important; }
.border-primary { border-color: var(--hd-primary) !important; }
.progress { --bs-progress-bar-bg: var(--hd-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--hd-primary); }
.nav-link { --bs-nav-link-hover-color: var(--hd-primary-dark); }
.page-link { --bs-pagination-color: var(--hd-primary); --bs-pagination-active-bg: var(--hd-primary); --bs-pagination-active-border-color: var(--hd-primary); --bs-pagination-hover-color: var(--hd-primary-dark); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(15, 139, 120, .15); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--hd-primary); }
.btn-check:checked + .btn-outline-primary { background: var(--hd-primary); border-color: var(--hd-primary); color: #fff; }

/* Sortable table headers (js/table-sort.js) */
th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sort:hover { color: var(--hd-primary); }
th.th-sort::after { content: '⇅'; opacity: .3; font-size: .75em; margin-inline-start: .3rem; }
th.th-sort[aria-sort="ascending"]::after { content: '▲'; opacity: .9; color: var(--hd-primary); }
th.th-sort[aria-sort="descending"]::after { content: '▼'; opacity: .9; color: var(--hd-primary); }
th.th-sort:focus-visible { outline: 2px solid var(--hd-primary); outline-offset: -2px; }