/* CBE brand tokens — taken from canbe.sa (:root vars) */
@font-face{font-family:Outfit;font-weight:400;font-display:swap;src:url(fonts/outfit-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-weight:600;font-display:swap;src:url(fonts/outfit-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-weight:800;font-display:swap;src:url(fonts/outfit-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Cairo;font-weight:400;font-display:swap;src:url(fonts/cairo-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Cairo;font-weight:600;font-display:swap;src:url(fonts/cairo-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Cairo;font-weight:800;font-display:swap;src:url(fonts/cairo-arabic-800-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --cbe-navy:#14306a; --cbe-navy-deep:#0d214d; --cbe-navy-soft:#e8edf7;
  --cbe-red:#e3121f; --cbe-red-dark:#c10d18; --cbe-ink:#14254a; --cbe-border:#d8deea;
}

body, input, select, textarea, button, .popupmenu, .ui-dialog, .listing, .formcontent {
  font-family: Outfit, Cairo, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
body { color: var(--cbe-ink); }
a, a:visited, .formlinks a, .link { color: var(--cbe-navy); }
a:hover { color: var(--cbe-red); }

/* Primary buttons */
.btn.btn-primary, .btn.mainaction, button.mainaction, .ui-dialog .ui-button.mainaction,
.floating-action-buttons .btn, #messagelist-content .btn-primary {
  background: var(--cbe-red) !important; border-color: var(--cbe-red) !important; color:#fff !important;
  border-radius: 10px !important; font-weight: 600;
}
.btn.btn-primary:hover, .btn.mainaction:hover, button.mainaction:hover { background: var(--cbe-red-dark) !important; border-color: var(--cbe-red-dark) !important; }
.btn:focus, input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--cbe-navy) !important; box-shadow: 0 0 0 .2rem rgba(20,48,106,.18) !important;
}

/* Left task bar */
#layout-menu { background: linear-gradient(180deg, var(--cbe-navy-deep), var(--cbe-navy)) !important; }
#layout-menu #logo { background: transparent !important; }
#layout-menu #logo img { max-height: 56px; }
#layout-menu a, #layout-menu .menu a, #layout-menu .special-buttons a { color: rgba(255,255,255,.82) !important; }
#layout-menu a:hover, #layout-menu .menu a:hover { color:#fff !important; background: rgba(255,255,255,.08) !important; }
#layout-menu a.selected, #layout-menu .menu a.selected { color:#fff !important; background: var(--cbe-red) !important; }
#layout-menu .compose { background: var(--cbe-red) !important; color:#fff !important; border-radius: 10px; margin: .4rem; }

/* Lists and folders */
.listing li.selected, .listing tr.selected td, table.listing tr.selected td,
#folderlist-content li.selected > a { background-color: var(--cbe-navy-soft) !important; color: var(--cbe-ink) !important; }
.listing li.selected > a, #folderlist-content li.selected > a { color: var(--cbe-navy) !important; font-weight: 600; }
.listing li.focused, .listing tr.focused td { outline-color: var(--cbe-navy) !important; }
.unreadcount, .listing li .unreadcount { background: var(--cbe-red) !important; color: #fff !important; }
#messagelist tr.unread .subject a, #messagelist tr.unread .fromto { color: var(--cbe-navy) !important; }
.header, .header-title, #layout-sidebar .header, #layout-list .header, #layout-content .header { border-color: var(--cbe-border) !important; }
.header .header-title { font-weight: 600; color: var(--cbe-ink); }

/* Login page */
body.task-login {
  background: linear-gradient(135deg, #0d214d 0%, #14306a 58%, #1c3d80 100%) !important; min-height: 100vh;
}
body.task-login #layout, body.task-login #layout-content { background: transparent !important; }
body.task-login #layout-content > div, body.task-login #login-form {
  background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(5,15,40,.45);
}
body.task-login #login-form { padding: 2rem 2rem 1.5rem; max-width: 26rem; margin: 0 auto; }
body.task-login #logo { max-height: 120px; margin: .5rem auto 1rem; display: block; }
body.task-login #login-form .formbuttons .btn { width: 100%; padding: .7rem; font-size: 1.05rem; }
body.task-login #login-footer, body.task-login #login-footer a { color: rgba(255,255,255,.75) !important; }
body.task-login #login-form table td { border: 0; }

/* Phone: floating compose button + small-screen header */
.floating-action-buttons a, .floating-action-buttons .button, .floating-action-buttons button {
  background-color: var(--cbe-red) !important; border-color: var(--cbe-red) !important; color: #fff !important;
  box-shadow: 0 8px 20px rgba(227,18,31,.35) !important;
}
.badge-primary, .badge.badge-primary { background-color: var(--cbe-navy) !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--cbe-navy) !important; border-color: var(--cbe-navy) !important; }

/* Language switch */
.canbe-login-lang { text-align: center; margin-top: 1rem; font-weight: 600; }
.canbe-login-lang a { color: var(--cbe-navy) !important; padding: 0 .5rem; text-decoration: none; opacity: .65; }
.canbe-login-lang a.active { opacity: 1; color: var(--cbe-red) !important; }
.canbe-login-lang span { color: var(--cbe-border); }
#taskmenu a.canbe-lang:before, #layout-menu a.canbe-lang:before { content: "\f0ac"; } /* globe icon (Font Awesome in Elastic) */