/* Admin panel — plain, functional styling. Uses the same brand colors
   as the public site, but a simpler layout meant for editing, not
   showing off. Safe to leave alone; nothing here affects the public
   pages at all. */

:root{
	--paper-0:#FFFDF8; --paper-50:#FBF3E4; --paper-100:#F4E9D2;
	--ink-900:#2B2118; --ink-700:#5B4C3B; --ink-500:#8B7A64;
	--turquoise-700:#0B6B6F; --turquoise-600:#0E8A8F; --turquoise-100:#DBF1F0;
	--cobalt-700:#1E3A6B; --cobalt-600:#2A4B8D;
	--coral-700:#B33A22; --coral-600:#D8492E; --coral-100:#FBE3DC;
	--gold-700:#A87A1E; --gold-600:#D2A02A; --gold-100:#FBF0D2;
	--line:rgba(43,33,24,.16);
}
*{box-sizing:border-box;}
body{
	margin:0; background:var(--paper-50); color:var(--ink-900);
	font-family:-apple-system,'Segoe UI',Roboto,sans-serif; line-height:1.55;
}
a{color:var(--turquoise-700);}
.admin-header{
	background:var(--cobalt-700); color:#fff; padding:.9rem 1.4rem;
	display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
}
.admin-header .brand{font-weight:700; letter-spacing:.02em;}
.admin-nav{display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.92rem;}
.admin-nav a{color:#E7ECFA; text-decoration:none;}
.admin-nav a:hover, .admin-nav a.is-active{color:#fff; text-decoration:underline;}
.admin-nav .logout{color:#F6C9BC;}
.admin-wrap{max-width:920px; margin:0 auto; padding:2rem 1.4rem 4rem;}
.admin-card{
	background:var(--paper-0); border:1px solid var(--line); border-radius:10px;
	padding:1.5rem; margin-bottom:1.6rem; box-shadow:0 12px 30px -22px rgba(43,33,24,.4);
}
h1{font-size:1.5rem; margin:0 0 .3rem;}
h2{font-size:1.15rem; margin:0 0 1rem;}
.admin-intro{color:var(--ink-700); margin-top:0;}
.dash-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem;}
.dash-card{
	display:block; background:var(--paper-0); border:1px solid var(--line); border-radius:10px;
	padding:1.2rem; text-decoration:none; color:inherit; transition:box-shadow .15s ease, transform .15s ease;
}
.dash-card:hover{box-shadow:0 14px 30px -18px rgba(43,33,24,.45); transform:translateY(-2px);}
.dash-card strong{display:block; font-size:1.05rem; color:var(--cobalt-700);}
.dash-card span{font-size:.85rem; color:var(--ink-700);}

table{width:100%; border-collapse:collapse; font-size:.92rem;}
th, td{text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--line); vertical-align:top;}
th{color:var(--ink-700); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em;}
td.actions{white-space:nowrap;}
td.actions a{margin-right:.8rem; font-size:.85rem;}
td.actions .danger{color:var(--coral-700);}

label{display:block; font-weight:600; font-size:.86rem; margin:1rem 0 .3rem;}
label:first-child{margin-top:0;}
input[type=text], input[type=password], input[type=number], input[type=file], textarea, select{
	width:100%; font:inherit; font-size:.95rem; padding:.6rem .7rem; border:1px solid var(--line);
	border-radius:7px; background:var(--paper-50); color:var(--ink-900);
}
textarea{min-height:90px; resize:vertical;}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--turquoise-600); box-shadow:0 0 0 3px var(--turquoise-100);}
.checkbox-row{display:flex; align-items:center; gap:.5rem; margin-top:1rem;}
.checkbox-row input{width:auto;}
.checkbox-row label{margin:0; font-weight:500;}

.btn{
	display:inline-block; margin-top:1.3rem; padding:.65rem 1.3rem; border:none; border-radius:7px;
	background:var(--turquoise-600); color:#fff; font-weight:700; font-size:.92rem; cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--turquoise-700);}
.btn-secondary{background:var(--paper-100); color:var(--ink-900);}
.btn-secondary:hover{background:var(--paper-50);}

.alert{padding:.8rem 1rem; border-radius:8px; margin-bottom:1.2rem; font-size:.9rem;}
.alert-error{background:var(--coral-100); color:var(--coral-700);}
.alert-success{background:var(--turquoise-100); color:var(--turquoise-700);}
.hint{font-size:.8rem; color:var(--ink-500); margin-top:.3rem;}
.empty-note{color:var(--ink-500); font-style:italic; font-size:.9rem;}

/* Compact inline text inputs used inside a table row (e.g. bulk-editing
   surah name / reciter directly in the list, instead of the normal
   full-width form inputs above). */
input.table-input[type=text]{
	width:100%; font:inherit; font-size:.88rem; padding:.35rem .5rem;
	border:1px solid var(--line); border-radius:6px; background:var(--paper-50); color:var(--ink-900);
}
input.table-input[type=text]:focus{outline:none; border-color:var(--turquoise-600); box-shadow:0 0 0 2px var(--turquoise-100);}

/* Login pages (admin + teachers) — a proper "sign in" moment instead of
   a bare form dropped on the page: centered on its own backdrop, a brand
   mark up top, a full-width button. Both login.php files share this. */
body.login-page{
	min-height:100vh; margin:0; box-sizing:border-box;
	display:flex; align-items:center; justify-content:center;
	background:radial-gradient(1100px 550px at 50% -8%, var(--turquoise-100), transparent 65%), var(--paper-50);
	padding:2.5rem 1.2rem;
}
.login-wrap{max-width:380px; width:100%; margin:0; padding:0;}
.login-brand{display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:1.5rem;}
.login-brand img{width:60px; height:60px; border-radius:50%; object-fit:cover; box-shadow:0 8px 20px -8px rgba(43,33,24,.4); background:var(--paper-0);}
.login-brand strong{display:block; margin-top:.75rem; font-size:1.1rem; color:var(--ink-900);}
.login-brand span{display:block; font-size:.76rem; color:var(--turquoise-700); letter-spacing:.06em; text-transform:uppercase; font-weight:700; margin-top:.2rem;}
.login-wrap .admin-card{
	border-radius:14px; padding:1.9rem 1.7rem;
	box-shadow:0 28px 54px -30px rgba(43,33,24,.5); margin-bottom:0;
}
.login-wrap .admin-card h1{text-align:center; font-size:1.3rem;}
.login-wrap .admin-intro{text-align:center; font-size:.86rem; margin-bottom:1.1rem;}
.login-wrap .btn{width:100%; text-align:center; margin-top:1.6rem; padding:.8rem 1.3rem; font-size:.98rem; letter-spacing:.01em;}
.login-back{display:block; text-align:center; margin-top:1.4rem; font-size:.87rem; color:var(--ink-700); text-decoration:none;}
.login-back:hover{color:var(--turquoise-700);}

.thumb{width:72px; height:54px; object-fit:cover; border-radius:6px; border:1px solid var(--line); display:block;}
form .thumb{margin-top:.6rem; width:140px; height:100px;}
.thumb-placeholder{
	display:flex; align-items:center; justify-content:center; background:var(--cobalt-700); color:#fff;
	font-size:.7rem; font-weight:600; text-align:center; letter-spacing:.02em;
}

/* Gallery admin: pick Photo / Video upload / YouTube link, then only the
   matching section below shows (see the small inline script on that page). */
.media-type-tabs{display:flex; gap:.6rem; flex-wrap:wrap; margin:.4rem 0 1.2rem;}
.media-type-tab{
	display:flex; align-items:center; gap:.4rem; font-weight:500; font-size:.88rem; margin:0;
	padding:.55rem .9rem; border:1px solid var(--line); border-radius:7px; cursor:pointer; background:var(--paper-50);
}
.media-type-tab input{width:auto; margin:0;}
.media-type-tab:has(input:checked){border-color:var(--turquoise-600); background:var(--turquoise-100); color:var(--turquoise-700);}
.media-type-section{margin-top:.2rem;}

/* Gallery admin: filter tabs above "Everything in the gallery" so a long
   mixed list of photos/videos/YouTube links can be narrowed down to just
   one type instead of scrolling through everything at once (see the
   inline script on that page — pure client-side row show/hide). */
.gallery-filter-tabs{display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1rem;}
.gallery-filter-tab{
	font-weight:500; font-size:.86rem; margin:0; padding:.45rem .85rem;
	border:1px solid var(--line); border-radius:999px; cursor:pointer; background:var(--paper-50); color:inherit;
}
.gallery-filter-tab .count{color:var(--ink-500); font-size:.82em;}
.gallery-filter-tab.active{border-color:var(--turquoise-600); background:var(--turquoise-100); color:var(--turquoise-700);}
.gallery-filter-tab.active .count{color:inherit;}

/* Group header rows inside "Everything in the gallery" — clusters same-
   category (or same-playlist, for YouTube) rows together, same grouping
   the public Gallery page uses to build its tiles. Any category typed
   into the form above gets its own header here automatically. */
.gallery-group-header td{
	background:var(--paper-100); font-weight:700; font-size:.78rem; text-transform:uppercase;
	letter-spacing:.03em; color:var(--ink-700); padding-top:.7rem; padding-bottom:.7rem;
}
.gallery-group-header .count{font-weight:500; text-transform:none; letter-spacing:0; color:var(--ink-500);}
tbody[data-section-type] + tbody[data-section-type] .gallery-group-header:first-child td{border-top:2px solid var(--line);}

/* Drag-and-drop reordering of a whole category block (see the second
   inline script on gallery.php) — same grip icon as the item-level handle
   below, sized down slightly and inline with the category name/count. */
.group-drag-handle{
	display:inline-flex; align-items:center; justify-content:center; width:1.2rem; height:1.2rem;
	color:var(--ink-500); cursor:grab; border-radius:4px; vertical-align:-.3em; margin-right:.3rem;
}
.group-drag-handle:hover{background:var(--paper-200, var(--paper-100)); color:var(--ink-700);}
tr.gallery-group-header{cursor:default;}
tr.gallery-group-header.dragging{opacity:.4; background:var(--turquoise-100);}
tr.gallery-group-header td{transition:background-color .1s ease;}

/* Drop-target highlight for whole-category dragging — shown on whichever
   category header the drag is currently over, instead of physically
   moving that category's (possibly hundreds of) rows on every dragover
   tick. A thin turquoise line above/below the header shows where the
   dragged category will land once you let go. */
tr.gallery-group-header.group-drop-before td{box-shadow: inset 0 3px 0 0 var(--turquoise-600);}
tr.gallery-group-header.group-drop-after td{box-shadow: inset 0 -3px 0 0 var(--turquoise-600);}

/* Expand/collapse toggle beside a category's name. Categories with more
   than 20 items start collapsed (see gallery.php) so a huge category like
   "Shorts" doesn't dump hundreds of rows on the page by default, and so
   it's just one short row to grab when dragging it to reorder. */
.group-toggle{
	display:inline-flex; align-items:center; justify-content:center; width:1.3rem; height:1.3rem;
	color:var(--ink-500); background:none; border:none; border-radius:4px; cursor:pointer;
	vertical-align:-.3em; margin-right:.15rem; padding:0;
}
.group-toggle:hover{background:var(--paper-200, var(--paper-100)); color:var(--ink-700);}
.group-toggle svg{transition:transform .12s ease;}
tr.gallery-group-header.collapsed .group-toggle svg{transform:rotate(-90deg);}

/* Drag-and-drop reordering within a category (see the inline script on
   gallery.php). The handle is the only grabbable target — dragging the
   row itself would fight with text selection and the Edit/Delete links. */
.drag-handle-cell{width:1.6rem; padding-right:0; text-align:center;}
.drag-handle{
	display:inline-flex; align-items:center; justify-content:center; width:1.4rem; height:1.4rem;
	color:var(--ink-500); cursor:grab; border-radius:4px;
}
.drag-handle:hover{background:var(--paper-100); color:var(--ink-700);}
tr.gallery-row{cursor:default;}
tr.gallery-row.dragging{opacity:.4; background:var(--turquoise-100);}
tr.gallery-row td{transition:background-color .1s ease;}