/* Local font faces: ensure files exist in public/fonts */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Ubuntu-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Ubuntu-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Amiri-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Amiri-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Scheherazade New';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ScheherazadeNew-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Scheherazade New';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/ScheherazadeNew-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Javanese';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/NotoSansJavanese-Regular.ttf') format('truetype');
  font-display: swap;
}
:root{
  --bg:#f9fafb;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#111827;
  --border:#e5e7eb;
  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --accent:#0ea5e9;
}
*{box-sizing:border-box}
body{margin:0;font-family:Ubuntu,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text)}
/* Arabic typography: use Scheherazade/Amiri and RTL layout */
:lang(ar), .arabic{font-family:"Scheherazade New","Amiri",Ubuntu,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;direction:rtl;unicode-bidi:isolate;line-height:1.9}
:lang(ar) input, .arabic input{direction:rtl;text-align:right}
:lang(ar) textarea, .arabic textarea{direction:rtl;text-align:right}
:lang(ar) select, .arabic select{direction:rtl}
header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--accent),var(--primary));color:#fff;padding:12px 16px}
header h1{margin:0;font-size:18px}
nav a{color:#fff;text-decoration:none;margin-right:10px}
nav a:hover{text-decoration:underline}
nav .danger{color:#ffb4b4}
main{max-width:1200px;margin:20px auto;padding:0 16px}
section{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px;overflow-x:auto;box-shadow:0 1px 2px rgba(0,0,0,.04)}
/* Buttons */
button, .btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:10px 14px;cursor:pointer;transition:background .15s ease,box-shadow .15s ease}
button:hover, .btn:hover{background:var(--primary-600);box-shadow:0 4px 12px rgba(37,99,235,.25)}
button.secondary, .btn.secondary{background:#6b7280}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:#fdfdfd;color:var(--text);cursor:pointer}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.danger{background:#d32f2f;color:#fff;border-color:#d32f2f}
/* Aliases to match markup variations */
.btn.btn-primary, .btn.primary { background:#1976d2; color:#fff; border-color:#1976d2; }
.btn.btn-secondary, .btn.secondary { background:#6b7280; color:#fff; border-color:#6b7280; }
.btn.btn-danger, .btn.danger { background:#d32f2f; color:#fff; border-color:#d32f2f; }
.btn:disabled{opacity:.6;cursor:not-allowed}
input:not([type="radio"]):not([type="checkbox"]), select, textarea{width:100%;padding:8px;border:1px solid #d1d5db;border-radius:6px;margin:6px 0 12px 0}
/* Controls (radio/checkbox) should not be full-width */
input[type="radio"], input[type="checkbox"]{width:auto;margin:0 6px 0 0;vertical-align:middle}
/* Standardized table styles */
.table{width:100%;max-width:100%;border-collapse:collapse;table-layout:fixed}
.table th,.table td{border:1px solid #ddd;padding:8px;text-align:left;word-wrap:break-word;overflow-wrap:break-word;word-break:normal;white-space:normal}
.table th{white-space:nowrap}
.table th{background:#f6f6f6}
.table tbody tr:nth-child(even){background:#fafafa}
/* Center first column (Kolom No) globally */
/* Removed global first-column centering to avoid breaking non-"No" tables (e.g., Profil) */
/* Narrow No column */
.table .col-no{width:56px;text-align:center}
/* Ensure No column cells are centered even without class */
.table td.col-no{ text-align:center }
/* Action buttons column */
.table .actions{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
/* Standard Aksi column width */
.table .col-actions{width:120px}
.table th.col-actions, .table td.col-actions{ text-align:center }
/* Responsive table wrapper for mobile/Exambrowser */
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-responsive .table{min-width:720px}
/* Specific min-widths for student pages */
.table-history{min-width:980px}
.table-exams{min-width:820px}

/* Compact table spacing on small screens */
@media(max-width:640px){
  .table{table-layout:auto}
  .table th{padding:6px;font-size:12px;white-space:nowrap}
  .table td{padding:6px;font-size:12px;word-break:normal;overflow-wrap:break-word;white-space:normal}
}
@media(max-width:480px){
  .table th{padding:5px;font-size:11px;white-space:nowrap}
  .table td{padding:5px;font-size:11px;word-break:normal;overflow-wrap:break-word;white-space:normal}
}
.icon-btn{border:1px solid #ccc;background:#fff;color:#333;border-radius:4px;padding:4px 8px;cursor:pointer;font-size:14px}
.icon-btn:hover{background:#f4f4f4}
.icon-btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn.danger{border-color:#d32f2f;color:#d32f2f}
/* Status icon colors: green for active, red for inactive */
.icon-btn.status-active{color:#16a34a;border-color:#16a34a}
.icon-btn.status-inactive{color:#dc2626;border-color:#dc2626}
/* SVG sizing for action icons */
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;vertical-align:middle}
.icon-btn.secondary{color:#fff;background:#6b7280;border-color:#6b7280}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Single-column variant for options */
.form-row.form-row-stacked{grid-template-columns:1fr}
.timer{font-weight:bold;color:#dc2626}
footer{padding:12px 16px;text-align:center;color:#6b7280}
/* Alerts */
.alert { padding: 10px; border-radius: 6px; margin-bottom: 10px; }
.alert.success { background: #ecfdf5; color: #065f46; }
.alert.error { background: #fef2f2; color: #991b1b; }
.alert.warning { background: #fff7ed; color: #9a3412; }
/* Standardize legacy notice/error blocks */
.notice { padding: 10px; border-radius: 6px; margin-bottom: 10px; background: #ecfdf5; color: #065f46; }
.error { padding: 10px; border-radius: 6px; margin-bottom: 10px; background: #fef2f2; color: #991b1b; }
/* Shared option styles for previews/exams */
.options { display: flex; flex-direction: column; gap: 12px; }

/* Inline popover for compact action settings */
.actions-grid { position: relative; display: flex; gap: 6px; align-items: center; }
.inline-popover { position: absolute; top: 36px; right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; box-shadow: 0 8px 16px rgba(0,0,0,.08); width: 280px; z-index: 50; }
.inline-popover.pop-centered { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 320px; max-width: 95vw; z-index: 1001; }
.inline-popover form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-popover small { display:block; margin-top:6px; color:#6b7280; }
.hidden { display: none !important; }
/* Fullscreen overlay to block interactions while popover is open */
.popover-overlay { position: fixed; inset: 0; background: transparent; z-index: 1000; cursor: not-allowed; }
.options label.option { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid #e5e7eb; background: #fff; }
.options label.option input { position: absolute; opacity: 0; pointer-events: none; }
.options label.option .opt-badge { width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; border: 2px solid #2563eb; color: #2563eb; background: #fff; flex: 0 0 35px; }
.options label.option .opt-text { flex: 1; text-align: left; }
.options label.option.is-checked { background: #eef4ff; border-color: #c7d2fe; }
.options label.option.is-checked .opt-badge { background: #2563eb; color: #fff; }
/* Dropdown menu */
.dropdown{display:inline-block;position:relative}
.dropdown .menu-title{cursor:pointer;color:#fff;margin-right:10px;padding:2px 4px}
.dropdown .submenu{display:none;position:absolute;top:100%;left:0;background:#fff;color:#111;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);min-width:220px;z-index:50;padding:6px}
.dropdown:hover .submenu{display:block}
.dropdown.open .submenu{display:block}
.dropdown .submenu a{display:block;color:#111;padding:6px 10px;margin:0;text-decoration:none;border-radius:4px}
.dropdown .submenu a:hover{background:#f3f4f6}
/* Navigation dropdown */
nav .dropdown{display:inline-block;position:relative}
nav .dropdown .menu-title{cursor:pointer}
nav .dropdown:hover .submenu{display:block}
nav .dropdown.open .submenu{display:block}
nav .dropdown .submenu{display:none;position:absolute;background:#fff;border:1px solid #ddd;min-width:165px;box-shadow:0 4px 12px rgba(0,0,0,.08);z-index:100;border-radius:6px;padding:6px}
nav .dropdown .submenu a{display:block;padding:8px 12px;white-space:nowrap}

/* Dropdown sizing & alignment improvements */
.dropdown .submenu{width:max-content;min-width:165px;max-width:90vw;overflow-x:auto;max-height:75vh;overflow-y:auto}
nav .dropdown .submenu{width:max-content;min-width:165px;max-width:85vw;overflow-x:auto;max-height:75vh;overflow-y:auto}
/* Right-aligned variant for items near right edge (e.g., akun) */
nav .dropdown-right .submenu{left:auto;right:0}
/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-overlay.show{display:flex}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:100;align-items:center;justify-content:center}
.modal .modal-card{background:var(--card);border:1px solid var(--border);border-radius:12px;max-width:640px;width:95%;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.modal .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #eee}
.modal .content{padding:16px}
.modal footer{padding:12px 16px;border-top:1px solid #eee;text-align:right}
.modal .close{background:#ef4444}
.show{display:flex}
/* Login page layout */
.login-page main{max-width:420px;margin:0 auto;padding:0 16px}
.login-card{max-width:420px;margin:10vh auto;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.login-card h2{margin:0 0 10px 0;text-align:center}
section h2{font-size:18px;margin:0 0 8px 0}
/* Required field asterisk */
.required-star{color:#ef4444;margin-left:4px;font-weight:bold}
/* Better checkbox visibility */
input[type="checkbox"]{accent-color:#2563eb;width:18px;height:18px}
/* Simple pagination styles */
.pagination{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px}
.pagination a,.pagination span{padding:4px 8px;border:1px solid #ddd;border-radius:4px;background:#fff;color:#111;text-decoration:none}
.pagination .active{background:#2563eb;color:#fff;border-color:#2563eb}
.pagination .disabled{opacity:.6;cursor:not-allowed}
.pagination .dots{border:none;background:transparent}

/* Dashboard card grid */
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.dash-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dash-grid{grid-template-columns:1fr}}
.dash-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.dash-card .dash-icon{flex:0 0 40px;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.dash-card .dash-content{flex:1}
.dash-card .dash-title{margin:0;font-size:13px;color:#6b7280}
.dash-card .dash-value{margin:2px 0 0 0;font-size:20px;font-weight:700;color:#111}
/* Icon theme colors */
.icon-green{background:#ecfdf5;color:#065f46}
.icon-red{background:#fef2f2;color:#991b1b}
.icon-blue{background:#eef2ff;color:#1d4ed8}
.icon-orange{background:#fff7ed;color:#9a3412}
.icon-purple{background:#f5f3ff;color:#6d28d9}
.icon-teal{background:#f0fdff;color:#0e7490}

/* Login hero (two-panel) */
.login-hero-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.login-hero{display:grid;grid-template-columns:1.15fr 1fr;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.12);max-width:920px;width:100%}
.login-hero .left{background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff;padding:26px;display:flex;flex-direction:column;justify-content:center}
.login-hero .left .brand{display:flex;align-items:center;gap:8px;font-weight:700}
.login-hero .left .brand .dot{width:10px;height:10px;border-radius:50%;background:#fff}
.login-hero .left h1{margin:10px 0 6px 0;font-size:21px}
.login-hero .left p{margin:0;color:#e5e7eb}
.login-hero .left .active-term{margin-top:20px;font-weight:500}
.login-hero .right{padding:22px}
.login-hero .right .logo{display:flex;justify-content:center;margin-bottom:10px}
.login-hero .right .logo img{width:110px;height:110px;object-fit:contain;border-radius:50%;border:3px solid #e5e7eb;background:#fff}
.login-hero .right label{font-weight:500;color:#374151;margin-top:4px}
.login-hero .right select, .login-hero .right input{padding:8px;margin:4px 0 6px 0}
.login-hero .right button{width:100%;border-radius:8px;padding:10px 14px;font-weight:600}
.login-hero .version{text-align:right;color:#6b7280;margin-top:6px;font-size:12px}
@media(max-width:800px){.login-hero{grid-template-columns:1fr}.login-hero .right{padding:18px}.login-hero .left{min-height:180px}}
/* Login form tweaks */
.login-hero .right form{max-width:380px;margin:0 auto}
.login-hero .right select,.login-hero .right input{width:100%;padding:10px;margin:6px 0 10px 0}
.login-hero .right label{margin-top:8px}
.login-hero .right button{margin-top:4px}

/* Responsive tables: allow horizontal scroll on small screens */
section { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { word-break: normal; }
@media (max-width: 768px) {
  .table { min-width: 640px; }
}

/* Modal mobile scrolling improvements */
@media (max-width: 768px) {
  .modal { align-items: flex-start; }
  .modal .modal-card { max-height: 90vh; overflow: auto; margin-top: 6vh; margin-bottom: 6vh; }
}

/* Action buttons alignment in results table */
.results-table td:last-child { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.results-table td:last-child form { display: inline; }
.results-table td:last-child .secondary { height: 30px; padding: 0 10px; }
/* End login form tweaks */

/* Login card (centered) */
.login-card{max-width:420px;width:100%;margin:24px auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 24px rgba(0,0,0,.08);padding:20px 32px}
.login-card .logo{display:flex;justify-content:center;margin-bottom:8px}
.login-card .logo img{width:75px;height:75px;object-fit:contain;border-radius:50%;border:3px solid #e5e7eb;background:#fff}
.login-card h2{text-align:center;color:#374151;font-size:20px;margin:4px 0 8px 0}
.login-card .version{text-align:center;color:#6b7280;margin-top:6px;font-size:12px}

/* Inputs without icons */
.login-card input{width:100%;padding:12px 24px;margin:6px 0 10px 0}
.login-card select{width:100%;padding:12px 24px;margin:6px 0 10px 0}
.login-card label{display:block;font-weight:500;color:#374151;margin-top:8px;font-size:14px}
.login-card select,.login-card input{font-size:14px}
.login-card select option{font-size:inherit}
.login-card button{width:100%;border-radius:8px;padding:12px 28px;font-weight:600;background:#2563eb;color:#fff;border:none}
.login-card button:hover{background:#1d4ed8}
/* Center vertical for login page */
body.login-page main{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* Version text outside card */
body.login-page .version{margin-top:10px;text-align:center;color:#6b7280;font-size:12px}

/* Normalize sizes for Bank Soal tabs */
.tab-pane{font-size:16px}
.tab-pane .table th,.tab-pane .table td{font-size:16px}
/* Match heading style inside Bank Soal tabs to global sections */
.tab-pane h2{font-size:18px;margin:0 0 8px 0}

/* Global font-size reductions (-2px) */
body{font-size:14px !important}
header h1{font-size:16px !important}
section h2{font-size:16px !important}
.icon-btn{font-size:12px !important}
.options label.option .opt-badge{font-size:14px !important}
.dash-card .dash-title{font-size:11px !important}
.dash-card .dash-value{font-size:18px !important}
.login-hero .left h1{font-size:19px !important}
.login-hero .version{font-size:10px !important}
.login-card h2{font-size:18px !important}
.login-card .version{font-size:10px !important}
body.login-page .version{font-size:10px !important}
.tab-pane{font-size:14px !important}
.tab-pane .table th,.tab-pane .table td{font-size:14px !important}

/* Standardize control heights across core pages */
select{height:35px !important}
input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="email"], input[type="password"]{height:35px !important}

/* Login-specific overrides: ensure TA text renders cleanly */
.login-card select, .login-card input{
  height:40px !important;
  line-height:1.6;
  padding:10px 16px;
}
.login-card select, .login-card input { font-size:14px; }
.login-card select option { font-size:inherit; }

/* Responsive styles for admin pages */
@media (max-width: 768px) {
  /* Hasil Ujian, Materi, Upload Soal, Soal Terbaru, Aktivitas, Manajemen Akun Pendidik */
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  
  /* Ensure all tables are responsive on mobile */
  .table-responsive .table {
    min-width: 100%;
    width: max-content;
  }
  
  /* Adjust form layouts for mobile */
  .form-row {
    grid-template-columns: 1fr;
  }
  
  /* Adjust button sizes for mobile */
  .btn, button {
    padding: 8px 10px;
    font-size: 13px;
  }
  
  /* Improve dropdown menu usability on mobile */
  .dropdown .submenu {
    position: absolute;
    width: 220px;
    max-width: 90vw;
  }
  
  /* Specific fixes for admin pages */
  #admin-results-table, 
  #admin-materials-table,
  #admin-questions-table,
  #admin-activity-table,
  #admin-teachers-table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
  
  /* Adjust section padding for mobile */
  section {
    padding: 12px 10px;
  }
  
  /* Adjust header for mobile */
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  /* Improve navigation on mobile */
  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
}

/* Mobile overrides for admin tables to prevent vertical text and stacking */
@media (max-width: 768px) {
  /* Materi */
  .table.table-materials { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-materials { table-layout: auto !important; }
  .table-materials thead th { white-space: nowrap !important; }
  .table-materials tbody td { white-space: nowrap !important; }
  .table-materials thead th:nth-child(2),
  .table-materials tbody td:nth-child(2) { white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; }
  .table-materials .actions { flex-wrap: nowrap !important; gap: 4px; }

  /* Aktivitas */
  .table.table-activity { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-activity { table-layout: auto !important; }
  .table-activity thead th { white-space: nowrap !important; }
  .table-activity tbody td { white-space: nowrap !important; }
  .table-activity thead th:nth-child(7),
  .table-activity tbody td:nth-child(7) { white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; }

  /* Soal Terbaru */
  .table.table-questions-latest { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-questions-latest { table-layout: auto !important; }
  .table-questions-latest thead th { white-space: nowrap !important; }
  .table-questions-latest tbody td { white-space: nowrap !important; }
  .table-questions-latest thead th:nth-child(7),
  .table-questions-latest tbody td:nth-child(7) { min-width: 240px !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; }
.table-questions-latest tbody td.col-actions .actions-grid { display: flex !important; flex-wrap: nowrap !important; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-questions-latest tbody td.col-actions .actions-grid > * { flex: 0 0 auto; }

  /* Jadwal Ujian: rapikan ikon aksi agar tidak menumpuk */
  .table.table-exams { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-exams thead th:nth-child(10), .table-exams tbody td:nth-child(10) { min-width: 160px !important; }
  .table-exams tbody td:last-child .actions-grid { display: flex !important; flex-wrap: nowrap !important; gap: 6px; align-items: center; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-exams tbody td:last-child .actions-grid > * { flex: 0 0 auto; }

  /* Analisis Soal (Kategori Pembeda & Rekomendasi) */
  .table.analysis-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .analysis-table { table-layout:auto !important; }
  .analysis-table thead th, .analysis-table tbody td { white-space: nowrap !important; }
  .analysis-table thead th:nth-child(8),
  .analysis-table tbody td:nth-child(8),
  .analysis-table thead th:nth-child(9),
  .analysis-table tbody td:nth-child(9) { white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; min-width: 180px; }

  /* Icon buttons sizing on small screens */
  .icon-btn { width: 32px; height: 32px; padding: 4px; }
}
.inline-popover .popover-header .icon-btn { padding: 2px 6px; }