/* ============================================================
   Sabak - Islamic Premium (Login + Portals + Role dashboards)
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Hind Siliguri', 'Segoe UI', system-ui, sans-serif;
    background: #f3efe3;
    color: #1e293b;
    line-height: 1.7;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* ---------- আইকন ----------
   <x-icon> কম্পোনেন্টের SVG-তে width/height লেখা থাকে না, শুধু viewBox
   থাকে। তাই মাপ না দিলে ব্রাউজার তাকে ডিফল্ট ৩০০×১৫০ আকারে আঁকে — লগইন
   পাতায় আইকনগুলো এত বড় হয়ে গিয়েছিল যে পুরো পাতা ২০০০px লম্বা হয়ে
   গিয়েছিল। এই একটি নিয়মই সব ঠিক করে দেয়, কারণ বাকি সব জায়গা em-এ
   মাপ দেয় (যেমন .wic{font-size:30px})। */
.ico{width:1.15em;height:1.15em;vertical-align:-.19em;flex:0 0 auto;display:inline-block;overflow:visible}
.ico-tx{vertical-align:-.05em}
a .ico,button .ico,.btn .ico{pointer-events:none}

/* ---------- Color themes ---------- */
.indigo  { background: linear-gradient(135deg,#312e81,#4f46e5); }
.green   { background: linear-gradient(135deg,#0b2b1a,#16a34a); }
.orange  { background: linear-gradient(135deg,#7c2d12,#ea580c); }
.purple  { background: linear-gradient(135deg,#4c1d95,#7c3aed); }
.teal    { background: linear-gradient(135deg,#134e4a,#0d9488); }

.btn.indigo  { background: linear-gradient(135deg,#312e81,#4f46e5); }
.btn.green   { background: linear-gradient(135deg,#0b2b1a,#16a34a); }
.btn.orange  { background: linear-gradient(135deg,#7c2d12,#ea580c); }
.btn.purple  { background: linear-gradient(135deg,#4c1d95,#7c3aed); }
.btn.teal    { background: linear-gradient(135deg,#134e4a,#0d9488); }

/* ---------- Auth (login) pages : Islamic premium ---------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% -10%, #14532d 0%, #0b2b1a 45%, #04120a 100%);
}
/* ﷽ একটি অতি চওড়া লিগেচার গ্লিফ — ৪০px ফন্টেই প্রায় ৪৬০px চওড়া হয়।
   তাই এই সাজসজ্জার স্তরটি কেটে বন্ধ করে দেওয়া হলো, নইলে ছোট পর্দায় গ্লিফটি
   বাইরে বেরিয়ে পুরো পাতা ডানে-বাঁয়ে গড়িয়ে যায়। */
.auth-bg{position:absolute;inset:0;overflow:hidden;opacity:.35;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23ffd84d' stroke-opacity='.35'%3E%3Cpath d='M75 10 L83 60 L135 68 L83 76 L75 126 L67 76 L15 68 L67 60 Z'/%3E%3Ccircle cx='75' cy='68' r='26'/%3E%3C/g%3E%3C/svg%3E") repeat;pointer-events:none}
.auth-bg::after{content:"﷽";position:absolute;top:18px;left:50%;transform:translateX(-50%);color:rgba(255,216,77,.3);font-size:40px;font-family:'Amiri',serif;max-width:100%}

.auth-wrap{width:100%;max-width:920px;display:grid;grid-template-columns:1fr 1fr;position:relative;z-index:1;background:rgba(255,253,244,.98);border-radius:24px;overflow:hidden;border:1px solid #e3d194;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.auth-side{background:linear-gradient(160deg,#071f12,#0f7a3d 75%);color:#fff;padding:44px 38px;display:flex;flex-direction:column;justify-content:center;gap:10px;position:relative;overflow:hidden}
.auth-side::before{content:"☪";position:absolute;left:-30px;bottom:-50px;font-size:220px;opacity:.08;color:#ffd84d}
.auth-ayah{font-family:'Amiri',serif;color:#ffd84d;font-size:30px}
.auth-side h2{font-family:'Noto Serif Bengali',serif;font-size:30px}
.auth-side-sub{color:#cfe3d3;font-size:14px}
.auth-points{display:flex;flex-direction:column;gap:10px;margin:18px 0;font-size:14px}
.auth-points span{background:rgba(255,255,255,.1);border:1px solid rgba(255,216,77,.35);padding:9px 14px;border-radius:12px;display:flex;align-items:center;gap:9px}
.auth-points .ico{width:1.35em;height:1.35em;color:#ffd84d;flex-shrink:0}
.auth-home{color:#ffd84d;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.auth-home .ico{width:1.2em;height:1.2em}
.btn .ico{width:1.25em;height:1.25em;vertical-align:-.3em}

.auth-card {
    padding: 40px 38px;
}
.auth-logo {
    width: 60px; height: 60px;
    border-radius: 18px;
    color: #fff;
    font-size: 26px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 12px 26px rgba(0,0,0,.25);
}
.auth-role{display:inline-block;font-size:12px;font-weight:800;color:#0f7a3d;background:#e8f2ea;padding:3px 14px;border-radius:20px;margin-bottom:8px}

.auth-title { font-size: 26px; font-weight: 700; font-family:'Noto Serif Bengali',serif;color:#0b2b1a}
.auth-subtitle { color: #64748b; font-size: 14px; margin-bottom: 24px; }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: #334155; }

.form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d8cfae;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    background: #fffdf4;
}
.form-control:focus {
    outline: none;
    border-color: #0f7a3d;
    box-shadow: 0 0 0 3px rgba(15,122,61,.15);
    background: #fff;
}
.pass-wrap{position:relative}
.pass-eye{position:absolute;left:10px;top:50%;transform:translateY(-50%);border:none;background:none;font-size:18px;cursor:pointer;color:#64748b;line-height:1;display:flex;align-items:center}
/* আইকন দুটি একসাথেই markup-এ থাকে — দেখানো-লুকানো চলে এই নিয়মে */
.pass-eye .pe-off{display:none}
.pass-eye.is-on .pe-on{display:none}
.pass-eye.is-on .pe-off{display:inline-block}
.pass-wrap .form-control{padding-left:42px}

.form-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #475569; cursor: pointer; }
.forgot{font-size:13px;color:#0f7a3d;font-weight:700}

.btn {
    display: inline-block;
    border: none;
    border-radius: 12px;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    cursor: pointer;
    transition: filter .15s, transform .1s;
    box-shadow: 0 12px 26px rgba(11,43,26,.25);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.98); }
.btn-block { width: 100%; }
.btn-light { background: #fff; color: #334155; border: 1px solid #e2e8f0; box-shadow:none}
.btn-light:hover { background: #f1f5f9; filter: none; }

.alert { border-radius: 12px; padding: 12px 14px; font-size: 13px; margin-bottom: 18px; }
.alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.alert ul { list-style: none; }

.auth-footer { text-align: center; margin-top: 22px; font-size: 13px; display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.auth-footer a { color: #0f7a3d; font-weight: 700; }
@media(max-width:820px){.auth-wrap{grid-template-columns:1fr;max-width:460px}.auth-side{padding:30px 26px}.auth-card{padding:30px 24px}}

/* ---------- Portal landing page : premium ---------- */
.auth-page.portal-bg{background:radial-gradient(circle at 50% -10%,#14532d 0%,#0b2b1a 45%,#04120a 100%)}
.portal-wrap { text-align: center; max-width: 960px; width: 100%; position:relative;z-index:1}
.portal-ayah{font-family:'Amiri',serif;color:#ffd84d;font-size:30px}
.portal-title { font-size: 40px; font-weight: 800; color: #fff; font-family:'Noto Serif Bengali',serif}
.portal-subtitle { color: #cfe3d3; margin-bottom: 32px; }

.portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 18px;
}

.portal-card {
    background: linear-gradient(180deg,#fffdf4,#f6efdb);
    border:1px solid #e3d194;
    border-radius: 20px;
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    transition: transform .2s, box-shadow .2s;
    position:relative;overflow:hidden;
}
.portal-card::before{content:"";position:absolute;top:0;right:18px;left:18px;height:4px;border-radius:0 0 8px 8px;background:linear-gradient(90deg,transparent,#0f7a3d,#c9a227,transparent)}
.portal-card:hover { transform: translateY(-6px); box-shadow: 0 24px 55px rgba(0,0,0,.45); }

.portal-icon {
    width: 56px; height: 56px;
    border-radius: 18px;
    color: #fff;
    font-size: 24px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow:0 10px 22px rgba(0,0,0,.25);
}
.portal-card strong { font-size: 16px; color:#0b2b1a}
.portal-card small { color: #8a8270; font-size: 12px; }

/* ছোট পর্দায় পোর্টালের কার্ড — এক কলামে, আইকন বাঁয়ে লেখা ডানে।
   কার্ডের ভেতরে আইকন, নাম ও উপনাম তিনটি আলাদা সন্তান; flex-এ নাম আর উপনাম
   পাশাপাশি বসে যেত, তাই গ্রিডে আইকনটি দুই সারি জুড়ে বসানো হলো — তখন লেখা
   দুটি নিজে থেকেই উপর-নিচে সাজে। (নিয়মটি অবশ্যই উপরের ডিফল্ট নিয়মের পরে
   থাকতে হবে, নইলে ওগুলোই জিতে যায়।) */
@media(max-width:640px){
.portal-wrap{padding:0 4px}
.portal-ayah{font-size:24px}
.portal-title{font-size:28px}
.portal-subtitle{font-size:14px;margin-bottom:22px}
.portal-grid{grid-template-columns:1fr;gap:12px}
.portal-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 14px;text-align:start;padding:15px 18px;border-radius:16px}
.portal-card::before{top:0;bottom:0;right:auto;left:0;width:4px;height:auto;border-radius:0 6px 6px 0;background:linear-gradient(180deg,transparent,#0f7a3d,#c9a227,transparent)}
.portal-icon{grid-row:span 2;width:46px;height:46px;font-size:20px;border-radius:14px}
}
@media(max-width:380px){
.portal-title{font-size:24px}
.portal-ayah{font-size:20px}
}

/* ---------- Dashboard layout : Islamic premium + responsive ---------- */
.app-body { display: flex; min-height: 100vh; background:#f3efe3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230f7a3d' stroke-opacity='.1'%3E%3Cpath d='M60 10 L70 50 L110 60 L70 70 L60 110 L50 70 L10 60 L50 50 Z'/%3E%3C/g%3E%3C/svg%3E")}

.sidebar {
    width: 260px;flex-shrink:0;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    background: linear-gradient(180deg,#04120a,#0b2b1a 40%,#0f5132);
    border-left: 3px solid #c9a227;
    overflow-y:auto;
}
.sidebar::before{content:"";position:absolute;inset:0;opacity:.25;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23ffd84d' stroke-opacity='.4'%3E%3Cpath d='M75 10 L83 60 L135 68 L83 76 L75 126 L67 76 L15 68 L67 60 Z'/%3E%3C/g%3E%3C/svg%3E") repeat}
.sidebar > *{position:relative}

.sidebar-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.brand-badge {
    width: 44px; height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg,#0b2b1a,#0f7a3d);
    border:1px solid rgba(255,216,77,.6);
    display: flex; align-items: center; justify-content: center;
    font-size:22px;
    box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.brand-text { font-size: 21px; font-weight: 800; line-height:1.1}
.brand-text em{display:block;font-style:normal;font-size:10px;letter-spacing:3px;color:#ffd84d}

.sidebar-user {
    background: rgba(255,255,255,.1);
    border:1px solid rgba(255,216,77,.3);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 16px;
    display:flex;align-items:center;gap:10px;
}
.su-av{width:42px;height:42px;border-radius:50%;background:#f5b301;color:#221a00;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid #ffd84d;flex-shrink:0}
.sidebar-user strong { display: block; font-size: 14px; }
.sidebar-user small { opacity: 0.85; font-size: 12px; color:#ffd84d}

.sidebar-nav { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
.nav-link {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-width: 0;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 14px; font-weight: 600; line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none !important;
    border: 1px solid transparent;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .15s, border-color .15s, color .15s;
}
.nav-link:hover, .nav-link:focus { background: rgba(255, 255, 255, 0.12); color: #fff; text-decoration: none !important; }
.nav-link.active { background: linear-gradient(135deg,#f5b301,#e09b00); color: #221a00; font-weight: 800; box-shadow: 0 8px 18px rgba(245,179,1,.35); border-color: rgba(255,255,255,.4); }

.sidebar-logout { margin-top: 16px; }
.btn-gold{background:linear-gradient(135deg,#f5b301,#e09b00);color:#221a00}

.main { flex: 1; display: flex; flex-direction: column; min-width:0}

.topbar,.role-top {
    background: rgba(255,255,255,.95);
    backdrop-filter:blur(8px);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap:12px;
    border-bottom: 3px solid #c9a227;
    position: sticky;
    top: 0;
    z-index: 40;
}
.topbar h2,.role-top h2 { font-size: 19px;font-family:'Noto Serif Bengali',serif;color:#0b2b1a}
.topbar-user { color: #64748b; font-size: 12px; margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45vw}
.role-ham{display:none;width:42px;height:42px;border-radius:12px;border:1px solid #c9a227;background:#0b2b1a;color:#ffd84d;font-size:19px;cursor:pointer;flex-shrink:0}
.role-ov{display:none}

.content,.role-content { padding: 22px; }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.role-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.role-card{background:#fffdf4;border:1px solid #e3d194;border-radius:18px;padding:22px;box-shadow:0 14px 34px rgba(11,43,26,.12);position:relative;overflow:hidden}
.role-card::before{content:"";position:absolute;top:0;right:20px;left:20px;height:4px;border-radius:0 0 8px 8px;background:linear-gradient(90deg,transparent,#0f7a3d,#c9a227,transparent)}
.role-card .rc-ic{font-size:30px}
.role-card h3 { font-size: 16px; margin:8px 0 4px; color: #0b2b1a; }
.role-card p { color: #64748b; font-size: 14px; }
.role-card b.big{font-size:22px;color:#0b2b1a}
.role-hero{background:linear-gradient(135deg,#071f12,#0f7a3d);color:#fff;border-radius:18px;padding:26px;position:relative;overflow:hidden;border:1px solid #c9a227}
.role-hero::before{content:"☪";position:absolute;left:-10px;bottom:-60px;font-size:170px;opacity:.1;color:#ffd84d}
.role-hero h3{font-family:'Noto Serif Bengali',serif;font-size:22px}
.role-hero p{color:#cfe3d3;font-size:14px}
.role-hero-tx{position:relative;z-index:1}
.role-eyebrow{color:#ffd84d!important;font-weight:800;letter-spacing:2px;font-size:12px;margin-bottom:4px}

/* ভূমিকার ড্যাশবোর্ড : তথ্যের কার্ড ও প্যানেল (views/partials/role-dashboard.blade.php) */
.role-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:18px 0}
.role-stat{display:flex;align-items:center;gap:13px;background:#fffdf4;border:1px solid #e3d194;border-radius:16px;padding:16px;box-shadow:0 10px 26px rgba(11,43,26,.1)}
.role-stat-icon{width:46px;height:46px;border-radius:14px;background:#0f3d22;color:#ffd84d;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.role-stat strong{display:block;font-size:18px;color:#0b2b1a;line-height:1.4;word-break:break-word}
.role-stat span{display:block;font-size:13px;font-weight:700;color:#43544a}
.role-stat em{display:block;font-style:normal;font-size:11.5px;color:#8a8270;margin-top:2px}
.role-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.role-panel{background:#fffdf4;border:1px solid #e3d194;border-radius:16px;padding:18px;box-shadow:0 10px 26px rgba(11,43,26,.1)}
.role-panel h4{font-size:15px;font-weight:800;color:#0b2b1a;margin-bottom:12px;border-bottom:2px solid #e7dfc2;padding-bottom:9px}
.role-dl{display:flex;flex-direction:column;gap:9px}
.role-dl>div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.role-dl dt{color:#64748b;font-weight:700;flex-shrink:0}
.role-dl dd{color:#0b2b1a;font-weight:800;text-align:end;word-break:break-word}
.role-links{display:flex;flex-direction:column;gap:9px}
.role-links a{display:block;text-decoration:none;background:#f4fbf6;border:1px solid #cfe9d8;border-radius:12px;padding:11px 14px;font-size:13.5px;font-weight:700;color:#0f7a3d;transition:.16s}
.role-links a:hover{background:#0f7a3d;color:#fff;border-color:#0f7a3d}
.role-note{margin-top:12px;font-size:11.5px;color:#8a8270;line-height:1.8}
@media(max-width:900px){.role-panels{grid-template-columns:1fr}}

/* ==========================================================================
   পোর্টাল পাতা — শিক্ষক, শিক্ষার্থী ও অভিভাবক তিনজনেই ব্যবহার করেন
   ========================================================================== */

/* --- পাতার মাথা --- */
.portal-head{display:flex;align-items:flex-start;gap:16px;justify-content:space-between;flex-wrap:wrap;
    background:#fffdf4;border:1px solid #e3d194;border-radius:18px;padding:20px 22px;
    box-shadow:0 12px 30px rgba(11,43,26,.1);margin-bottom:18px}
.portal-head-tx{flex:1 1 320px;min-width:0}
.portal-eyebrow{color:#0f7a3d;font-weight:800;letter-spacing:1.5px;font-size:11.5px;margin-bottom:4px}
.portal-head h3{font-family:'Noto Serif Bengali',serif;font-size:21px;color:#0b2b1a;line-height:1.5}
.portal-head p{font-size:13px;color:#5b6b61;line-height:1.85;margin-top:6px;max-width:760px}
.portal-head-act{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* পাতার মাথার নিচে বাটনের সারি — হেডারের ভেতরে না বসিয়ে বাইরে রাখা হয় */
.head-actions{display:flex;gap:10px;flex-wrap:wrap;margin:-6px 0 18px}

/* --- সতর্কতার প্যানেল --- */
.role-panel.warn-panel{border-color:#e3a008;background:#fffbf0}
.role-panel.warn-panel h4{border-bottom-color:#f5dfa0;color:#7c4a03}

/* --- হেডারের ভেতরের ছোট লেখা --- */
.day-panel h4{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.day-count{margin-inline-start:auto;font-size:11.5px;font-weight:800;color:#0f7a3d;
    background:#eef7f1;border:1px solid #b8e0c8;border-radius:20px;padding:3px 11px;white-space:nowrap}

/* --- ছোট ছোট সারি (ক্লাস, নোটিশ, ছুটি) --- */
.row-line{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed #e7dfc2}
.row-line:last-of-type{border-bottom:0}
.rl-time{flex-shrink:0;min-width:112px;font-size:12px;font-weight:800;color:#0f7a3d;
    font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
.rl-tx{flex:1 1 auto;min-width:0}
.rl-tx b{display:block;font-size:13.5px;color:#0b2b1a;line-height:1.5;word-break:break-word}
.rl-tx small{display:block;font-size:11.5px;color:#7b8a80;margin-top:2px;word-break:break-word}

/* --- "সব দেখুন" লিংক --- */
.role-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12.5px;
    font-weight:800;color:#0f7a3d;text-decoration:none}
.role-more:hover{color:#0b2b1a;text-decoration:none}
.role-more .ico{width:1.1em;height:1.1em}

/* --- ব্যাজ --- */
.pill{display:inline-block;background:#f1f5f9;border:1px solid #dbe3ec;color:#475569;
    border-radius:20px;padding:2px 10px;font-size:11px;font-weight:800;white-space:nowrap}
.pill.green{background:#eef7f1;border-color:#b8e0c8;color:#0f7a3d}
.pill.amber{background:#fff7e6;border-color:#f0d090;color:#8a5a00}
.pill.red{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.row-sub{display:block;font-size:11px;color:#8a8270;margin-top:2px}
.row-soon{background:#fffdf0}
.row-soon td{border-bottom-color:#f0d090}

/* --- ফিল্টার বার --- */
.filter-bar{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.filter-bar label{display:flex;flex-direction:column;gap:5px;flex:0 1 220px;min-width:0}
.filter-bar label>span{font-size:11.5px;font-weight:800;color:#43544a}
.filter-bar select,.filter-bar input{width:100%;padding:9px 12px;border:1px solid #d8d0b4;
    border-radius:11px;font-family:inherit;font-size:13px;background:#fff;color:#0b2b1a}
.filter-bar select:focus,.filter-bar input:focus{outline:2px solid #0f7a3d;outline-offset:1px;border-color:#0f7a3d}

/* --- ফরম --- */
.form-stack{display:flex;flex-direction:column;gap:13px}
.form-stack label{display:flex;flex-direction:column;gap:5px;min-width:0}
.form-stack label>span{font-size:12px;font-weight:800;color:#43544a}
.form-stack select,.form-stack input,.form-stack textarea{width:100%;padding:10px 12px;
    border:1px solid #d8d0b4;border-radius:11px;font-family:inherit;font-size:13.5px;
    background:#fff;color:#0b2b1a}
.form-stack textarea{resize:vertical;line-height:1.7}
.form-stack select:focus,.form-stack input:focus,.form-stack textarea:focus{
    outline:2px solid #0f7a3d;outline-offset:1px;border-color:#0f7a3d}
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.hint{font-size:11px;color:#8a8270;line-height:1.7}
.req{color:#dc2626}

/* --- হাজিরার টেবিল --- */
.att-tbl .att-select{padding:7px 10px;border:1px solid #d8d0b4;border-radius:9px;
    font-family:inherit;font-size:12.5px;background:#fff;color:#0b2b1a;min-width:130px}
.att-tbl input[type=text]{padding:7px 10px;border:1px solid #e2dcc6;border-radius:9px;
    font-family:inherit;font-size:12.5px;width:100%;min-width:120px}
.quick-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.mini-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #cfe9d8;
    color:#0f7a3d;border-radius:10px;padding:7px 13px;font-family:inherit;font-size:12px;
    font-weight:800;cursor:pointer;transition:.16s}
.mini-btn:hover{background:#0f7a3d;color:#fff;border-color:#0f7a3d}
.mini-btn .ico{width:1.15em;height:1.15em}
.sticky-save{position:sticky;bottom:12px;margin-top:16px}

/* --- শ্রেণির কার্ড --- */
.class-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:15px}
.class-card{display:block;background:#fffdf4;border:1px solid #e3d194;border-radius:16px;
    padding:18px;box-shadow:0 10px 26px rgba(11,43,26,.1);text-decoration:none;transition:.18s}
.class-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(11,43,26,.16);text-decoration:none}
.cc-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cc-ic{width:44px;height:44px;border-radius:13px;background:#0f3d22;color:#ffd84d;
    display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cc-ic .ico{width:22px;height:22px}
.cc-head b{display:block;font-size:15px;color:#0b2b1a}
.cc-head small{display:block;font-size:11.5px;color:#7b8a80;margin-top:2px}
.cc-go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;
    font-weight:800;color:#0f7a3d}
.cc-go .ico{width:1.1em;height:1.1em}

/* --- চিপ --- */
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:#f4fbf6;border:1px solid #cfe9d8;
    color:#0f7a3d;border-radius:20px;padding:5px 13px;font-size:12px;font-weight:700}
.chip .ico{width:1.1em;height:1.1em}

/* --- বার গ্রিড --- */
.bar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px}
.bar-cell{background:#f4fbf6;border:1px solid #cfe9d8;border-radius:12px;padding:11px 8px;text-align:center}
.bc-num{display:block;font-size:14px;font-weight:800;color:#0f3d22;line-height:1.4}
.bar-cell small{display:block;font-size:10.5px;color:#7b8a80;margin-top:3px}

/* --- নোটিশ --- */
.notice-row{padding:13px 0;border-bottom:1px dashed #e7dfc2}
.notice-row:last-of-type{border-bottom:0}
.nr-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.nr-head b{font-size:14px;color:#0b2b1a;line-height:1.5}
.notice-row p{font-size:12.5px;color:#5b6b61;line-height:1.85;margin-top:5px;white-space:pre-line}
.notice-row small{display:inline-flex;align-items:center;gap:5px;font-size:11px;
    color:#8a8270;margin-top:7px}
.notice-row small .ico{width:1.05em;height:1.05em}

/* --- সিলেবাস --- */
.syllabus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:15px}
.syl-card h4{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.syl-title{font-size:13.5px;font-weight:800;color:#0b2b1a;margin-top:4px}
.topic-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.topic-list li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#43544a;line-height:1.7}
.topic-list .ico{width:1.15em;height:1.15em;color:#0f7a3d;flex-shrink:0;margin-top:2px}

/* --- খালি অবস্থা --- */
.portal-empty{display:flex;align-items:flex-start;gap:12px;padding:20px 4px;text-align:start}
.pe-ic{width:40px;height:40px;border-radius:12px;background:#f1f5f9;color:#94a3b8;
    display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pe-ic .ico{width:20px;height:20px}
.portal-empty b{display:block;font-size:13.5px;color:#43544a;line-height:1.6}
.portal-empty small{display:block;font-size:11.5px;color:#8a8270;line-height:1.8;margin-top:4px}

/* --- ফ্ল্যাশ বার্তা --- */
.role-flash{display:flex;align-items:flex-start;gap:11px;border-radius:14px;padding:13px 17px;
    font-size:13px;line-height:1.75;margin-bottom:16px;border:1px solid}
.role-flash .ico{width:1.25em;height:1.25em;flex-shrink:0;margin-top:3px}
.role-flash.ok{background:#eef7f1;border-color:#b8e0c8;color:#0f7a3d}
.role-flash.bad{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
.role-flash b{display:block;margin-bottom:3px}
.role-flash ul{margin:0;padding-inline-start:18px}

/* --- সাইডবারের মেনু (স্ক্রলযোগ্য, অনেক আইটেম) --- */
.sidebar-nav{overflow-y:auto;overflow-x:hidden;padding-inline-end:3px}
.sidebar-nav::-webkit-scrollbar{width:5px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,216,77,.4);border-radius:4px}
.nav-link .ico{width:1.2em;height:1.2em;flex-shrink:0}

/* --- টেবিল (পোর্টালের ভেতরে) ---
   `min-width:0` ছাড়া গ্রিডের ঘরটি টেবিলের চওড়া মাপেই আটকে থাকে, ফলে
   ছোট পর্দায় গোটা পাতা ডানে-বাঁয়ে স্ক্রল হয়ে যায়। ঘরটিকে ছোট হতে দিয়ে
   স্ক্রলিংটা টেবিলের নিজের বাক্সে সীমাবদ্ধ রাখা হয়। */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
.table-scroll>.tbl{min-width:520px}

/* গ্রিডের প্রতিটি সন্তান ছোট হতে পারবে — নইলে ভেতরের চওড়া কিছু (টেবিল,
   লম্বা শব্দ) পুরো পাতাকে টেনে বাইরে নিয়ে যায় */
.role-panels>*,.class-grid>*,.syllabus-grid>*,.bar-grid>*{min-width:0}
.role-panel{min-width:0;overflow-wrap:anywhere}

/* --- ছোট পর্দায় --- */
@media(max-width:700px){
    .portal-head{padding:16px}
    .portal-head h3{font-size:18px}
    .portal-head-act{width:100%}
    .portal-head-act .btn{flex:1 1 auto;justify-content:center}
    .rl-time{min-width:0;font-size:11px}
    .row-line{flex-wrap:wrap;gap:8px}
    .form-pair{grid-template-columns:1fr}
    .filter-bar label{flex:1 1 100%}
    .class-grid,.syllabus-grid{grid-template-columns:1fr}
    .table-scroll>.tbl{min-width:460px}
}

.card {
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.card h3 { font-size: 15px; margin-bottom: 6px; color: #334155; }
.card p { color: #64748b; font-size: 14px; }

/* role dashboards responsive */
@media(max-width:1000px){
.sidebar{position:fixed;right:0;top:0;bottom:0;z-index:95;transform:translateX(105%);transition:.3s;box-shadow:-20px 0 50px rgba(0,0,0,.35)}
.sidebar.open{transform:none}
.role-ov.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90}
.role-ham{display:flex;align-items:center;justify-content:center}
}
@media(max-width:640px){
.content,.role-content{padding:14px}
.role-hero h3{font-size:18px}
.topbar-user{display:none}
}