/* =========================================================
   ROYAL OPS
   Operations Control Design System
   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */

:root {

  --bg:
    #0d1b15;

  --bg-soft:
    #10231a;

  --panel:
    #13271e;

  --panel-2:
    #172e23;

  --panel-3:
    #1b3528;

  --border:
    #284438;

  --border-strong:
    #365749;


  --text:
    #f1f6f3;

  --text-soft:
    #d5e1da;

  --text-dim:
    #9eb1a7;


  --accent:
    #19c875;

  --accent-soft:
    rgba(
      25,
      200,
      117,
      .12
    );

  --accent-border:
    rgba(
      25,
      200,
      117,
      .38
    );


  --ok:
    #24c77a;

  --warn:
    #e9b949;

  --err:
    #e66a6a;

  --info:
    #6fa8dc;


  --radius-sm:
    8px;

  --radius-md:
    12px;

  --radius-lg:
    16px;

  --radius-xl:
    20px;


  --shadow-sm:
    0 4px 14px
    rgba(
      0,
      0,
      0,
      .16
    );

  --shadow-md:
    0 10px 28px
    rgba(
      0,
      0,
      0,
      .22
    );

  --shadow-lg:
    0 20px 50px
    rgba(
      0,
      0,
      0,
      .28
    );


  --topbar-height:
    68px;

  --sidebar-width:
    272px;


  --safe-top:
    env(
      safe-area-inset-top,
      0px
    );

  --safe-bottom:
    env(
      safe-area-inset-bottom,
      0px
    );

}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing:
    border-box;

  -webkit-tap-highlight-color:
    transparent;
}


html,
body {
  min-height:
    100%;
}


html {
  scroll-behavior:
    smooth;
}


body {

  margin:
    0;

  font-family:
    'Tajawal',
    system-ui,
    -apple-system,
    'Segoe UI',
    Arial,
    sans-serif;

  background:
    var(--bg);

  color:
    var(--text);

  overflow:
    hidden;
}


button,
input,
select,
textarea {
  font:
    inherit;
}


a {
  color:
    inherit;
}


svg {
  display:
    block;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {

  height:
    calc(
      var(--topbar-height) +
      var(--safe-top)
    );

  padding:
    var(--safe-top)
    20px
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  position:
    fixed;

  inset:
    0 0 auto 0;

  z-index:
    300;

  background:
    rgba(
      19,
      39,
      30,
      .96
    );

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

  backdrop-filter:
    blur(16px);
}


.topbar-start,
.topbar-end {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  text-decoration:
    none;
}


.brand-mark {

  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    11px;

  background:
    var(--accent-soft);

  color:
    var(--accent);

  font-size:
    17px;

  font-weight:
    700;
}


.brand-copy {

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.brand-copy .logo {

  font-size:
    15px;

  letter-spacing:
    .6px;
}


.brand-copy small {

  color:
    var(--text-dim);

  font-size:
    11px;
}


/* =========================================================
   CONNECTION STATUS
   ========================================================= */

.connection-status {

  min-height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    7px 11px;

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

  border-radius:
    11px;

  background:
    var(--panel-2);

  font-size:
    11px;
}


.connection-dot {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;
}


.connection-status.is-online
.connection-dot {

  background:
    var(--ok);

  box-shadow:
    0 0 0 4px
    rgba(
      36,
      199,
      122,
      .1
    );
}


.connection-status.is-offline
.connection-dot {

  background:
    var(--err);
}


.connection-text {

  font-weight:
    700;

  letter-spacing:
    .5px;
}


.connection-extra {

  color:
    var(--text-dim);

  padding-inline-start:
    5px;

  border-inline-start:
    1px solid
    var(--border);
}


/* =========================================================
   TOP USER
   ========================================================= */

.top-user {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.top-user-avatar {

  width:
    36px;

  height:
    36px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--panel-3);

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

  font-weight:
    700;

  color:
    var(--text-soft);
}


.top-user-copy {

  display:
    flex;

  flex-direction:
    column;

  min-width:
    100px;
}


.top-user-copy strong {

  max-width:
    180px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    13px;
}


.top-user-copy span {

  margin-top:
    1px;

  color:
    var(--text-dim);

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    .4px;
}


.top-logout-form {
  margin:
    0;
}


.top-logout-btn {

  height:
    36px;

  padding:
    0 12px;

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

  border-radius:
    10px;

  background:
    transparent;

  color:
    var(--text-dim);

  cursor:
    pointer;

  transition:
    .15s ease;
}


.top-logout-btn:hover {

  color:
    var(--text);

  border-color:
    var(--border-strong);

  background:
    var(--panel-2);
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu-btn {

  display:
    none;

  width:
    40px;

  height:
    40px;

  padding:
    9px;

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

  border-radius:
    10px;

  background:
    var(--panel-2);

  cursor:
    pointer;
}


.mobile-menu-btn span {

  display:
    block;

  width:
    100%;

  height:
    2px;

  margin:
    4px 0;

  background:
    var(--text-soft);

  border-radius:
    999px;
}


/* =========================================================
   APP SHELL
   ========================================================= */

.app-shell {

  height:
    100vh;

  padding-top:
    calc(
      var(--topbar-height) +
      var(--safe-top)
    );

  display:
    grid;

  grid-template-columns:
    var(--sidebar-width)
    minmax(
      0,
      1fr
    );
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {

  height:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;

  padding:
    18px;

  overflow-y:
    auto;

  background:
    var(--panel);

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

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--border)
    transparent;
}


/* =========================================================
   SIDEBAR PROFILE
   ========================================================= */

.sidebar-profile {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    11px;

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

  border-radius:
    13px;

  background:
    var(--panel-2);
}


.sidebar-profile-avatar {

  width:
    38px;

  height:
    38px;

  flex:
    0 0
    38px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    11px;

  color:
    var(--accent);

  background:
    var(--accent-soft);

  font-weight:
    700;
}


.sidebar-profile-copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;
}


.sidebar-profile-copy strong {

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    13px;
}


.sidebar-profile-copy span {

  margin-top:
    2px;

  color:
    var(--text-dim);

  font-size:
    10px;
}


/* =========================================================
   SIDEBAR SEARCH
   ========================================================= */

.sidebar-search {

  height:
    42px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 11px;

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

  border-radius:
    11px;

  background:
    var(--bg-soft);
}


.sidebar-search:focus-within {

  border-color:
    var(--accent-border);
}


.sidebar-search svg {

  width:
    18px;

  height:
    18px;

  flex:
    0 0
    18px;

  fill:
    var(--text-dim);
}


.sidebar-search input {

  width:
    100%;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--text);

  font-size:
    12px;
}


.sidebar-search input::placeholder {

  color:
    var(--text-dim);
}


/* =========================================================
   SIDEBAR NAV
   ========================================================= */

.sidebar-section {

  display:
    grid;

  gap:
    8px;
}


.sidebar-section-label {

  padding:
    0 7px;

  color:
    var(--text-dim);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1px;

  text-transform:
    uppercase;
}


.sidebar-nav {

  display:
    grid;

  gap:
    4px;
}


.sidebar-nav a {

  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    8px 10px;

  border:
    1px solid
    transparent;

  border-radius:
    12px;

  color:
    var(--text-dim);

  text-decoration:
    none;

  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}


.sidebar-nav a:hover {

  color:
    var(--text);

  background:
    var(--panel-2);

  border-color:
    var(--border);
}


.sidebar-nav a.active {

  color:
    var(--text);

  background:
    var(--accent-soft);

  border-color:
    var(--accent-border);
}


.nav-icon {

  width:
    34px;

  height:
    34px;

  flex:
    0 0
    34px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    9px;

  background:
    var(--panel-2);
}


.sidebar-nav a.active
.nav-icon {

  background:
    rgba(
      25,
      200,
      117,
      .14
    );
}


.nav-icon svg {

  width:
    18px;

  height:
    18px;

  fill:
    currentColor;
}


.nav-copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;
}


.nav-copy strong {

  font-size:
    13px;

  font-weight:
    600;
}


.nav-copy small {

  margin-top:
    2px;

  color:
    var(--text-dim);

  font-size:
    10px;
}


.sidebar-divider {

  height:
    1px;

  background:
    var(--border);
}


/* =========================================================
   SIDEBAR BOTTOM
   ========================================================= */

.sidebar-bottom {

  margin-top:
    auto;
}


.sidebar-system-status {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    10px;

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

  border-radius:
    11px;

  background:
    var(--bg-soft);
}


.system-status-dot {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--ok);
}


.sidebar-system-status div {

  display:
    flex;

  flex-direction:
    column;
}


.sidebar-system-status strong {

  font-size:
    11px;
}


.sidebar-system-status small {

  color:
    var(--text-dim);

  font-size:
    9px;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.main-content {

  min-width:
    0;

  height:
    100%;

  padding:
    22px;

  overflow-y:
    auto;

  background:
    var(--bg);
}


/* Compatibility */

.content {

  min-width:
    0;
}


/* =========================================================
   PAGE HERO
   ========================================================= */

.page-hero {

  padding:
    18px;

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

  border-radius:
    var(--radius-lg);

  background:
    var(--panel);
}


/* =========================================================
   CARDS
   ========================================================= */

.card {

  position:
    relative;

  padding:
    18px;

  overflow:
    hidden;

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

  border-radius:
    var(--radius-lg);

  background:
    var(--panel);

  box-shadow:
    var(--shadow-sm);
}


/*
  لا يوجد transform على hover.
  هذا متعمد لأن النظام تشغيلي.
*/

.card:hover {

  border-color:
    var(--border-strong);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.title {

  margin:
    0 0
    8px;

  color:
    var(--text);

  font-weight:
    700;
}


.muted {

  color:
    var(--text-dim);

  font-size:
    13px;
}


/* =========================================================
   GRID
   ========================================================= */

.row {

  display:
    grid;

  gap:
    14px;
}


.grid-2 {

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );
}


.grid-3 {

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


/* =========================================================
   INPUTS
   ========================================================= */

.input,
select,
textarea {

  min-height:
    42px;

  padding:
    0 12px;

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

  border-radius:
    10px;

  outline:
    0;

  background:
    var(--panel-2);

  color:
    var(--text);

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}


textarea {

  padding:
    10px 12px;
}


.input:focus,
select:focus,
textarea:focus {

  border-color:
    var(--accent-border);

  box-shadow:
    0 0 0 3px
    rgba(
      25,
      200,
      117,
      .08
    );
}


.input::placeholder,
textarea::placeholder {

  color:
    #82988c;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {

  min-height:
    40px;

  padding:
    0 14px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

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

  border-radius:
    10px;

  background:
    var(--accent-soft);

  color:
    var(--text);

  cursor:
    pointer;

  text-decoration:
    none;

  font-weight:
    600;

  font-size:
    13px;

  transition:
    background .15s ease,
    border-color .15s ease;
}


.btn:hover {

  background:
    rgba(
      25,
      200,
      117,
      .18
    );

  border-color:
    var(--accent);
}


.btn.ghost {

  border-color:
    var(--border);

  background:
    var(--panel-2);

  color:
    var(--text-soft);
}


.btn.ghost:hover {

  border-color:
    var(--border-strong);

  background:
    var(--panel-3);
}


.btn:disabled {

  opacity:
    .45;

  cursor:
    not-allowed;
}


/* =========================================================
   TAGS
   ========================================================= */

.tag {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    26px;

  padding:
    3px 9px;

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

  border-radius:
    999px;

  background:
    var(--panel-2);

  color:
    var(--text-dim);

  font-size:
    11px;

  font-weight:
    600;
}


.tag.success {

  color:
    #bff1d5;

  border-color:
    rgba(
      36,
      199,
      122,
      .35
    );

  background:
    rgba(
      36,
      199,
      122,
      .08
    );
}


/* =========================================================
   TABLES
   ========================================================= */

.table {

  width:
    100%;

  border-collapse:
    collapse;

  font-size:
    13px;
}


.table th,
.table td {

  padding:
    12px 11px;

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

  text-align:
    start;

  vertical-align:
    middle;
}


.table thead th {

  color:
    var(--text-dim);

  background:
    var(--panel);

  font-size:
    11px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    .4px;
}


.table tbody tr:hover {

  background:
    rgba(
      255,
      255,
      255,
      .015
    );
}


.table.compact th,
.table.compact td {

  padding:
    9px 10px;
}


/* =========================================================
   HELPERS
   ========================================================= */

.ltr {

  direction:
    ltr;

  unicode-bidi:
    plaintext;
}


.center {

  min-height:
    100vh;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;
}


/* =========================================================
   TOAST
   ========================================================= */

.toast {

  position:
    fixed;

  left:
    22px;

  bottom:
    calc(
      22px +
      var(--safe-bottom)
    );

  min-width:
    220px;

  max-width:
    420px;

  padding:
    12px 14px;

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

  border-radius:
    11px;

  background:
    var(--panel-2);

  box-shadow:
    var(--shadow-md);

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translateY(
      8px
    );

  transition:
    .2s ease;

  z-index:
    500;
}


.toast.show {

  opacity:
    1;

  transform:
    translateY(
      0
    );
}


/* =========================================================
   SIDEBAR BACKDROP
   ========================================================= */

.sidebar-backdrop {

  display:
    none;
}


/* =========================================================
   RESPONSIVE TABLE
   ========================================================= */

@media(
  max-width:
  700px
) {

  .table.responsive thead {

    display:
      none;
  }


  .table.responsive,
  .table.responsive tbody,
  .table.responsive tr,
  .table.responsive td {

    display:
      block;

    width:
      100%;
  }


  .table.responsive tr {

    margin:
      10px 0;

    padding:
      7px 10px;

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

    border-radius:
      13px;

    background:
      var(--panel-2);
  }


  .table.responsive td {

    min-height:
      42px;

    padding:
      9px 6px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      12px;

    border:
      0;

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


  .table.responsive td:last-child {

    border-bottom:
      0;
  }


  .table.responsive td::before {

    content:
      attr(
        data-label
      );

    flex:
      0 0
      38%;

    color:
      var(--text-dim);

    font-size:
      11px;
  }

}


/* =========================================================
   TABLET / MOBILE SHELL
   ========================================================= */

@media(
  max-width:
  980px
) {

  body {

    overflow:
      auto;
  }


  .mobile-menu-btn {

    display:
      block;
  }


  .topbar {

    padding-inline:
      14px;
  }


  .top-user-copy {

    display:
      none;
  }


  .connection-extra {

    display:
      none;
  }


  .app-shell {

    display:
      block;

    height:
      auto;

    min-height:
      100vh;
  }


  .sidebar {

    width:
      min(
        300px,
        86vw
      );

    height:
      calc(
        100vh -
        var(--topbar-height)
      );

    position:
      fixed;

    top:
      calc(
        var(--topbar-height) +
        var(--safe-top)
      );

    right:
      0;

    z-index:
      260;

    transform:
      translateX(
        105%
      );

    transition:
      transform .2s ease;

    box-shadow:
      var(--shadow-lg);
  }


  body.sidebar-open
  .sidebar {

    transform:
      translateX(
        0
      );
  }


  .sidebar-backdrop {

    position:
      fixed;

    inset:
      calc(
        var(--topbar-height) +
        var(--safe-top)
      )
      0
      0
      0;

    z-index:
      250;

    background:
      rgba(
        0,
        0,
        0,
        .48
      );
  }


  body.sidebar-open
  .sidebar-backdrop {

    display:
      block;
  }


  .main-content {

    height:
      auto;

    min-height:
      calc(
        100vh -
        var(--topbar-height)
      );

    padding:
      16px;
  }


  .grid-2,
  .grid-3 {

    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(
  max-width:
  560px
) {

  :root {

    --topbar-height:
      62px;

  }


  .topbar {

    gap:
      8px;

    padding-inline:
      10px;
  }


  .brand-copy small {

    display:
      none;
  }


  .brand-mark {

    width:
      34px;

    height:
      34px;
  }


  .brand-copy .logo {

    font-size:
      13px;
  }


  .connection-status {

    padding:
      6px 8px;
  }


  .connection-extra {

    display:
      none;
  }


  .top-user {

    display:
      none;
  }


  .top-logout-btn {

    padding:
      0 9px;

    font-size:
      11px;
  }


  .main-content {

    padding:
      12px;
  }


  .card {

    padding:
      14px;

    border-radius:
      14px;
  }


  .page-hero {

    padding:
      14px;
  }

}


/* =========================================================
   TOUCH
   ========================================================= */

@media(
  hover:
  none
) {

  .card:hover {

    border-color:
      var(--border);
  }


  .sidebar-nav a:hover {

    background:
      transparent;

    border-color:
      transparent;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(
  prefers-reduced-motion:
  reduce
) {

  * {

    scroll-behavior:
      auto !important;

    transition-duration:
      .001ms !important;

    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

  }

}