:root { --salah:#0b7a75; --salah-dark:#075955; --salah-soft:#e6f4f3; --ink:#1d2b2a; }
body { font-family: "Segoe UI", Tahoma, Arial, sans-serif; color: var(--ink); background:#fff; }
.salah-body { padding-top: 51px; min-height: 70vh; }
.brand-mark { display:inline-block; width:22px; height:22px; line-height:21px; text-align:center; border-radius:5px;
              background:var(--salah); color:#fff; font-weight:700; margin-right:4px; }
.salah-nav { background:#fff; border-color:#e3eceb; }
.salah-nav .navbar-brand { color: var(--salah-dark); font-weight:700; letter-spacing:.5px; }

/* hero */
.hero { background: linear-gradient(135deg, var(--salah-dark), var(--salah)); color:#fff; padding: 56px 0 64px; }
.hero h1 { font-weight:700; margin-top:0; }
.hero .lead { opacity:.92; }
.search-card { background:#fff; border-radius:8px; padding:18px; color:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.18); margin-top:24px; }
.section { padding: 40px 0; }
.section-alt { background: var(--salah-soft); }
.tile { display:block; background:#fff; border:1px solid #dcebe9; border-radius:8px; padding:20px; text-align:center; color:var(--ink); height:100%; margin-bottom:15px; }
.tile:hover { border-color:var(--salah); text-decoration:none; box-shadow:0 4px 14px rgba(11,122,117,.15); }
.tile .big { font-size:34px; color:var(--salah); line-height:1; }
.step-num { display:inline-block; width:34px; height:34px; line-height:34px; border-radius:50%; background:var(--salah); color:#fff; font-weight:700; text-align:center; margin-bottom:8px; }

/* directory cards */
.pcard { border:1px solid #dcebe9; border-radius:8px; padding:16px; margin-bottom:16px; background:#fff; }
.pcard h4 { margin-top:0; color:var(--salah-dark); }
.pcard .meta { color:#5a6b6a; font-size:13px; }
.pcard .fee { font-weight:700; color:var(--salah-dark); }

/* buttons */
.btn-salah { background:var(--salah); border-color:var(--salah-dark); color:#fff; }
.btn-salah:hover, .btn-salah:focus { background:var(--salah-dark); color:#fff; }

/* auth cards */
.auth-wrap { max-width:460px; margin: 36px auto; }
.auth-wrap.wide { max-width:780px; }
.auth-card { border:1px solid #dcebe9; border-radius:8px; padding:24px; background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.05); }
.auth-card h3 { margin-top:0; color:var(--salah-dark); }

/* slots */
.slot-list label { display:inline-block; margin:0 6px 8px 0; padding:6px 12px; border:1px solid #b9d6d3; border-radius:4px; cursor:pointer; font-weight:400; }
.slot-list input { margin-right:5px; }

/* footer */
.salah-footer { background:#10302e; color:#cfe3e1; padding:32px 0 12px; margin-top:30px; }
.salah-footer h4 { color:#fff; }
.salah-footer a { color:#9fd8d3; }
.salah-copy { margin-top:18px; color:#8fb1ae !important; }

/* panel */
.panel-body-bg { background:#f3f7f7; }
.panel-top { background:var(--salah-dark); border-color:var(--salah-dark); }
.panel-top .navbar-brand, .panel-top .navbar-text { color:#fff !important; }
.panel-wrap { padding-top:62px; }
.panel-side { background:#fff; border-right:1px solid #dcebe9; min-height:calc(100vh - 62px); padding-top:12px; }
.panel-side .nav-pills > li > a { border-radius:4px; color:var(--ink); }
.panel-side .nav-pills > li.active > a, .panel-side .nav-pills > li.active > a:hover { background:var(--salah); color:#fff; }
.panel-main { padding-bottom:40px; }
.page-title { margin-top:6px; margin-bottom:18px; color:var(--salah-dark); font-weight:600; }
.stat { background:#fff; border:1px solid #dcebe9; border-left:4px solid var(--salah); border-radius:6px; padding:14px 16px; margin-bottom:16px; }
.stat .n { font-size:28px; font-weight:700; color:var(--salah-dark); line-height:1.1; }
.stat .t { color:#5a6b6a; font-size:13px; }
.box { background:#fff; border:1px solid #dcebe9; border-radius:6px; padding:16px; margin-bottom:18px; }
.box h4 { margin-top:0; }
.table > thead > tr > th { background:#eef6f5; border-bottom:1px solid #cfe3e1; white-space:nowrap; }
.table-responsive-auto { overflow-x:auto; }
.validation { color:#a94442; display:block; font-size:12px; }
@media (max-width:767px){ .panel-side { min-height:0; border-right:0; } }