/* =========================================================================
   Tanweel App Shell Design System
   Built from the approved design mockup (tanweel_design_mockup_3.html).
   This file ADDS a modern sidebar + topbar app-shell layer on top of the
   existing stylish-portfolio.min.css (which stays loaded for legacy pages
   that have not been rebuilt yet). Load this file AFTER stylish-portfolio.
   ========================================================================= */

:root{
  --navy:#143d5e;
  --navy-dark:#0d2a41;
  --navy-darker:#0a1f30;
  --gold:#c8a24a;
  --gold-dark:#ad8636;
  --bg:#f3f5f8;
  --card:#ffffff;
  --line:#e3e8ee;
  --text:#1f2a33;
  --muted:#6b7a86;
  --danger:#d1453b;
  --danger-bg:#fbeaea;
  --success:#1f9d55;
  --success-bg:#e9f7ef;
  --info:#2f7fb8;
  --info-bg:#eaf3fa;
  --warn:#c8912a;
  --warn-bg:#fbf3e3;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,40,60,.06), 0 4px 16px rgba(20,40,60,.06);
}

/* ===== App shell ===== */
/* text-align:right here overrides the legacy Bootstrap/stylish-portfolio stylesheets,
   which still set text-align:left on body/labels for their original LTR template.
   Without this, plain block text (labels, headings, paragraphs) that doesn't set its
   own alignment inherits that left value even though direction:rtl is set, which is
   exactly why field labels like "الاسم الرباعي" were rendering on the left. */
.app{display:flex; min-height:100vh; direction:rtl; text-align:right; font-family:'Cairo',Tahoma,Arial,sans-serif; background:var(--bg); color:var(--text);}
.app *{box-sizing:border-box;}

.sidebar{
  width:250px; flex-shrink:0;
  background:linear-gradient(180deg,var(--navy),var(--navy-dark));
  color:#eef3f7;
  min-height:100vh;
  padding:18px 0;
  position:relative;
  z-index:60;
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px;
  padding:0 20px 18px; margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.sidebar .brand .logo-badge{width:64px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.sidebar .brand .logo-badge img{width:100%; height:auto; display:block; filter: drop-shadow(0 3px 10px rgba(0,0,0,.35));}
.sidebar .brand .name{font-weight:700; font-size:14px; line-height:1.4;}
.sidebar .brand .sub{font-size:11px; color:#a9c0d2;}

.navgroup{margin:10px 0;}
.navgroup .grouplabel{font-size:11px; color:#8fabc0; padding:10px 20px 6px; text-transform:uppercase; letter-spacing:.04em; font-weight:700;}
.navitem, a.navitem{
  display:flex; align-items:center; gap:10px;
  padding:10px 20px; font-size:14px; font-weight:500; color:#d7e3ec !important;
  border-right:3px solid transparent;
  transition:.15s; text-decoration:none; cursor:pointer;
}
.navitem .ic{width:18px; text-align:center; opacity:.85; font-size:14px;}
.navitem:hover{background:rgba(255,255,255,.06); color:#fff !important;}
.navitem.active{background:rgba(255,255,255,.09); border-right-color:var(--gold); color:#fff !important;}
.navitem .badge{margin-right:auto; background:var(--gold); color:#1a1300; font-size:11px; font-weight:700; border-radius:10px; padding:1px 7px;}

.main{flex:1; min-width:0; background:var(--bg); display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-bottom:1px solid var(--line);
  padding:12px 24px; gap:16px; flex-wrap:wrap;
}
.topbar .right{display:flex; align-items:center; gap:14px;}
.searchbox{
  display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line);
  border-radius:20px; padding:8px 16px; flex:1; max-width:360px; color:var(--muted); font-size:13px;
}
.searchbox input{border:none; background:transparent; outline:none; font-family:inherit; font-size:13px; color:var(--text); width:100%;}
.searchbox input::placeholder{color:var(--muted);}
.iconbtn{
  width:36px; height:36px; border-radius:50%; background:var(--bg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--navy); position:relative;
  text-decoration:none; cursor:pointer;
}
.userchip{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text);}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--gold); color:#1a1300; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;}
.logout-link, .logout-link a{color:var(--danger) !important; font-size:12px; font-weight:700; text-decoration:none;}

.sidebar-toggle-btn{
  display:none; width:36px; height:36px; border-radius:8px; background:var(--bg); border:1px solid var(--line);
  align-items:center; justify-content:center; font-size:16px; color:var(--navy); cursor:pointer;
}

.content{padding:24px; flex:1;}
.pagehead{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.pagehead h1{font-size:20px; margin:0; font-weight:700; color:var(--navy-dark);}
.pagehead .crumbs{font-size:12px; color:var(--muted); margin-top:2px;}

.app-banner{border-radius:10px; padding:10px 16px; font-size:13px; margin-bottom:14px; display:inline-block;}
.app-banner:empty{display:none; padding:0; margin:0;}

.btn{border:none; border-radius:9px; padding:9px 16px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; cursor:pointer; text-decoration:none;}
/* !important on background here is required, not decorative: css/stylish-portfolio.css
   (loaded just before this file on every master) declares its OWN .btn-primary/
   .btn-secondary with "background-color:#143d5e/#c8a24a !important" - the exact old
   default theme colors, hardcoded. !important beats a plain declaration regardless of
   load order, so without matching !important here, every themed button on the site
   stayed stuck on the old default colors no matter what was saved in branding
   settings, even though everything else (sidebar, topbar, login panel) correctly
   picked up the new :root override. Matching !important + this file loading after
   stylish-portfolio.css settles the tie in our favor. */
.btn-primary{background:var(--navy) !important; color:#fff !important;}
.btn-primary:hover{background:var(--navy-dark) !important;}
.btn-gold{background:var(--gold) !important; color:#1a1300 !important;}
.btn-gold:hover{background:var(--gold-dark) !important;}
.btn-ghost{background:#fff; color:var(--navy) !important; border:1px solid var(--line);}
.btn-danger{background:var(--danger-bg); color:var(--danger) !important; border:1px solid #f3cfcc;}

.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px;}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); position:relative; overflow:hidden;}
.kpi .stripe{position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;}
.kpi .label{font-size:12px; color:var(--muted); font-weight:600;}
.kpi .value{font-size:26px; font-weight:800; color:var(--navy-dark); margin:6px 0 2px;}
.kpi .delta{font-size:12px; font-weight:700;}
.kpi .delta.up{color:var(--success);}
.kpi .delta.down{color:var(--danger);}

.grid2{display:grid; grid-template-columns:1.4fr 1fr; gap:18px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:18px;}
.card .card-head{padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.card .card-head h3{margin:0; font-size:15px; font-weight:700; color:var(--navy-dark);}
.card .card-body{padding:16px 18px;}

.app table{width:100%; border-collapse:collapse; font-size:13px;}
.app th{text-align:right; color:var(--muted); font-weight:700; font-size:12px; padding:10px 12px; border-bottom:1px solid var(--line); background:#fafbfc;}
.app td{padding:11px 12px; border-bottom:1px solid var(--line);}
.app tr:hover td{background:#f8fafc;}

/* Popup / modal dialog - shared by any admin page that needs a floating detail panel
   instead of pushing content inline (e.g. admin/home.aspx's KPI drill-down). This is a
   plain full-postback WebForms app (no UpdatePanel/AJAX), so the "popup" is really just
   server-rendered markup shown on reload, styled to look and behave like a modal. */
.tanweel-modal-backdrop{
  position:fixed; inset:0; background:rgba(13,26,41,.55); z-index:1000;
  display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto;
}
.tanweel-modal{
  background:var(--card); border-radius:var(--radius); box-shadow:0 10px 40px rgba(0,0,0,.25);
  width:100%; max-width:1100px; max-height:calc(100vh - 80px); overflow:auto; position:relative;
}
.tanweel-modal .card{margin-bottom:0; border:none; box-shadow:none;}
.tanweel-modal .card-head{position:sticky; top:0; background:var(--card); z-index:2;
  /* BUG FIX: reserve space so the title text doesn't run under the close (x)
     button below, now that it's visible above the sticky header. */
  padding-inline-start:52px;
}
.tanweel-modal-close{
  position:absolute; inset-inline-start:14px; top:12px; background:none; border:none; font-size:24px;
  color:var(--muted); cursor:pointer; line-height:1; padding:4px 10px; border-radius:6px; text-decoration:none;
  /* BUG FIX: this sat at the same z-index "stack" as .card-head's sticky
     header (z-index:2) but painted earlier in source order, so the header's
     opaque background fully covered it - the close button existed in the
     markup but was completely invisible/unclickable. A higher z-index here
     puts it back on top. */
  z-index:5;
}
.tanweel-modal-close:hover{background:var(--bg); color:var(--danger);}

/* Rows that drill through to another page (e.g. a request's details) when clicked. */
.row-link-clickable{cursor:pointer;}
.row-link-clickable:hover td{background:var(--bg,#f3f5f8) !important;}

/* Activity-log error/failure highlighting. */
.row-activity-error td{background:var(--danger-bg,#fdeceb) !important;}
.badge-status{display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700;}
.badge-status.ok{background:#e6f4ea; color:var(--success,#1e7e34);}
.badge-status.fail{background:var(--danger-bg,#fdeceb); color:var(--danger,#c0392b);}

.status-pill{padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; display:inline-block;}
.status-pill.approved{background:var(--success-bg); color:var(--success);}
.status-pill.pending{background:var(--warn-bg); color:var(--warn);}
.status-pill.rejected{background:var(--danger-bg); color:var(--danger);}
.status-pill.review{background:var(--info-bg); color:var(--info);}

.filters-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.chip{background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px; color:var(--text); display:flex; align-items:center; gap:6px;}
.chip select, .chip input{border:none; background:transparent; font-family:inherit; font-size:13px; outline:none;}
.chip.active-filter{border-color:var(--gold); background:#fdf8ee; color:var(--gold-dark); font-weight:700;}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; flex-wrap:wrap;}
.tab, a.tab{padding:10px 18px; font-size:13px; font-weight:700; color:var(--muted) !important; border-bottom:2px solid transparent; cursor:pointer; text-decoration:none;}
.tab.active, a.tab.active{color:var(--navy-dark) !important; border-color:var(--gold);}

.report-card-grid{display:flex; flex-wrap:wrap; gap:14px;}
.report-card-grid .btn{min-width:210px; justify-content:center; padding:14px 18px; font-size:14px;}

/* ===== Login (two-panel) ===== */
/* text-align:right overrides the legacy Bootstrap/stylish-portfolio text-align:left
   default (see the same note on .app above) so labels/headings on the login,
   registration and forget-password pages align right by default like the rest of
   this RTL app, instead of inheriting the old template's left alignment. */
.login-wrap{min-height:100vh; display:flex; direction:rtl; text-align:right; font-family:'Cairo',Tahoma,Arial,sans-serif;}
.login-side{
  flex:1.1; background:radial-gradient(circle at 30% 20%, rgba(200,162,74,.18), transparent 45%), linear-gradient(160deg,var(--navy),var(--navy-darker));
  color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; text-align:center;
}
.login-side .logo-badge-lg{width:230px; height:auto; display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
.login-side .logo-badge-lg img{width:100%; height:auto; display:block; filter: drop-shadow(0 12px 30px rgba(0,0,0,.4));}
.login-side h2{margin:0 0 8px; font-size:22px;}
.login-side p{color:#c3d3e0; font-size:13px; max-width:320px; line-height:1.9;}
.login-form-side{flex:1; background:#fff; display:flex; align-items:center; justify-content:center; padding:40px;}
.login-box{width:100%; max-width:420px;}
.login-box h1{font-size:18px; color:var(--navy-dark); margin:0 0 20px; text-align:center;}
.field{margin-bottom:16px;}
.field label{display:block; text-align:right; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:6px;}
.field input, .field input[type=text], .field input[type=password]{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:9px; font-size:14px; font-family:inherit; box-sizing:border-box;}
.field input:focus{outline:none; border-color:var(--gold);}
.login-box .btn{width:100%; justify-content:center; padding:12px; font-size:14px; margin-top:6px;}
.login-box .foot-links{display:flex; justify-content:space-between; margin-top:14px; font-size:12px;}
.login-box .foot-links a{color:var(--navy); font-weight:700;}
.login-box .app-banner{width:100%; display:block; text-align:center; box-sizing:border-box;}

/* "Not a robot" verification box (self-hosted image CAPTCHA, register/captcha.ashx) */
.captcha-box{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:16px;}
.captcha-title{display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:10px;}
.captcha-question{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.captcha-img{width:150px; height:50px; border:1px solid var(--line); border-radius:8px; background:#fff; display:block;}
.captcha-refresh{font-size:20px; line-height:1; color:var(--navy) !important; text-decoration:none; cursor:pointer; padding:4px 6px;}
.captcha-refresh:hover{color:var(--gold-dark) !important;}
.captcha-answer{width:150px !important; text-align:center;}

/* ===== Communication (mailing) ===== */
.recipient-box{border:1px solid var(--line); border-radius:10px; padding:10px; max-height:220px; overflow:auto;}
.recipient-row{display:flex; align-items:center; gap:8px; padding:8px 6px; border-radius:6px; font-size:13px;}
.recipient-row:hover{background:var(--bg);}
.channel-tabs{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.channel-tab{flex:1; min-width:120px; border:1.5px solid var(--line); border-radius:10px; padding:12px; text-align:center; font-weight:700; font-size:13px; color:var(--muted);}
.channel-tab.selected{border-color:var(--gold); background:#fdf8ee; color:var(--gold-dark);}
.channel-tab .sub{display:block; font-size:11px; font-weight:500; margin-top:3px; color:var(--muted);}
textarea.composer{width:100%; min-height:130px; border:1px solid var(--line); border-radius:10px; padding:12px; font-family:inherit; font-size:14px; resize:vertical; box-sizing:border-box;}
.test-banner{background:var(--info-bg); border:1px solid #bcdcf0; color:#215577; border-radius:10px; padding:12px 16px; font-size:13px; margin-bottom:16px; display:flex; gap:10px; align-items:flex-start;}
.warn-banner{background:var(--warn-bg); border:1px solid #ecd8a6; color:#6b5310; border-radius:10px; padding:12px 16px; font-size:13px; margin-bottom:16px; display:flex; gap:10px; align-items:flex-start;}

/* ===== Reference table manager ===== */
.tm-layout{display:grid; grid-template-columns:230px 1fr; gap:18px;}
.tm-list{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.tm-list .item{padding:12px 16px; font-size:13px; font-weight:600; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; cursor:pointer;}
.tm-list .item.active{background:var(--navy); color:#fff;}
.tm-list .item .count{font-size:11px; color:var(--muted); font-weight:600;}
.tm-list .item.active .count{color:#cfe0ee;}

.responsive-note{display:flex; gap:10px; align-items:center; background:#fff; border:1px dashed var(--gold); border-radius:10px; padding:10px 14px; font-size:12px; color:var(--muted); margin-bottom:16px;}

/* ===== Legacy status-filter tab bar (asp:Menu) =====
   admin/requst/requst_mailbox.aspx, admin/requst/requst_details.aspx,
   admin/requst/add_requst.aspx, admin/money/deposits.aspx, admin/money/payments.aspx,
   admin/course/course_details.aspx, student/requst/requst_details.aspx and
   student/course/new_course.aspx all use the same horizontal <asp:Menu> tab bar,
   previously colored via hardcoded BackColor/ForeColor attributes directly on the
   Menu and its Static/DynamicHoverStyle/SelectedStyle sub-objects. Those sub-styles
   compile into their OWN auto-generated <style> block with the literal hex baked in
   at render time (see BrandingSettingService.RenderThemeStyle's long comment), so
   they can't pick up a :root override the way the rest of the shell does - CssClass
   here is the only way to make this tab bar follow the configured theme colors. */
/* Requested: a neutral light grey bar (not the theme's navy) - only the selected tab
   and the dropdown's selected item still use the theme accent (gold), so the active
   tab is still visually tied to the configured colors. */
.tanweel-tabmenu{background:#e9ecef !important; color:var(--navy-dark) !important;}
.tanweel-tabmenu-static-hover{background:#dde2e6 !important; color:var(--navy-dark) !important;}
.tanweel-tabmenu-static-selected{background:#fff !important; color:var(--navy-dark) !important;}
.tanweel-tabmenu-dynamic-hover{background:#dde2e6 !important; color:var(--navy-dark) !important;}
.tanweel-tabmenu-dynamic-menu{background:#fdf8ee !important; color:#000 !important;}
.tanweel-tabmenu-dynamic-selected{background:var(--gold) !important; color:#000 !important;}

@media (max-width: 900px){
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .grid2{grid-template-columns:1fr;}
  .tm-layout{grid-template-columns:1fr;}
  .sidebar{position:fixed !important; right:-250px !important; top:0; height:100vh; z-index:70; transition:.2s; transform:none !important;}
  .sidebar.open{right:0 !important;}
  .sidebar-toggle-btn{display:flex;}
  .login-wrap{flex-direction:column;}
}
@media (max-width:560px){
  .kpi-row{grid-template-columns:1fr;}
}