/* ============================================================
   PhotoSystem – Admin Panel Stylesheet
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body.admin-layout{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#f4f6f8;color:#1a1a1a;line-height:1.55;min-height:100vh;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ── Sidebar Overlay ──────────────────────────────────────── */
.sidebar-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:998;opacity:0;pointer-events:none;transition:opacity .3s ease}
.sidebar-overlay.active{opacity:1;pointer-events:auto}

/* ── Sidebar ──────────────────────────────────────────────── */
.admin-sidebar{position:fixed;top:0;left:0;width:250px;height:100vh;background:linear-gradient(180deg,#1a1a1a 0%,#222 100%);color:#fff;display:flex;flex-direction:column;z-index:1000;transition:width .3s ease,transform .3s ease}
.admin-sidebar.collapsed{width:64px}
.admin-sidebar.collapsed .sidebar-header span,
.admin-sidebar.collapsed .sidebar-user strong,
.admin-sidebar.collapsed .sidebar-nav span{display:none}
.admin-sidebar.collapsed .sidebar-nav a{justify-content:center;padding:.75rem 0}
.admin-sidebar.collapsed .sidebar-user{text-align:center;padding:1rem .5rem}
.admin-sidebar.collapsed .sidebar-user img{margin:0 auto 0}

.sidebar-header{display:flex;align-items:center;gap:.65rem;padding:1.15rem 1.3rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden}
.sidebar-header i{color:#c9a84c;font-size:1.2rem;flex-shrink:0}

.sidebar-user{padding:1.2rem 1.3rem;border-bottom:1px solid rgba(255,255,255,.06);text-align:center;overflow:hidden}
.sidebar-user img{width:52px;height:52px;border-radius:50%;object-fit:cover;margin:0 auto .6rem;border:2px solid rgba(255,255,255,.12)}
.sidebar-user strong{display:block;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sidebar-nav{flex:1;overflow-y:auto;padding:.7rem 0}
.sidebar-nav li{margin:0 .6rem}
.sidebar-nav a{display:flex;align-items:center;gap:.65rem;padding:.7rem 1rem;border-radius:8px;font-size:.88rem;color:rgba(255,255,255,.6);white-space:nowrap;transition:all .2s ease}
.sidebar-nav a i{width:20px;text-align:center;font-size:.9rem;flex-shrink:0}
.sidebar-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar-nav li.active a{background:rgba(201,168,76,.12);color:#c9a84c;font-weight:600}
/* ── Main Area ────────────────────────────────────────────── */
.admin-main{margin-left:25px;min-height:1vh;transition:margin-left .3s ease;z-index:1;position:relative}
.admin-sidebar.collapsed ~ .admin-main{margin-left:64px}

/* ── Top Bar ──────────────────────────────────────────────── */
.admin-topbar{background:#fff;border-bottom:1px solid #e5e7eb;padding:.9rem 0;position:sticky;top:0;z-index:100}
.admin-topbar .container{display:flex;align-items:center;gap:1rem;padding:0 2.2rem}
.admin-topbar h2{font-size:1.1rem;font-weight:600;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{margin-left:auto;display:flex;gap:.6rem;flex-shrink:0}
.menu-toggle{display:none;background:none;border:none;font-size:1.3rem;color:#1a1a1a;cursor:pointer;padding:.3rem;flex-shrink:0}
.hide-mobile-text{white-space:nowrap}

/* ── Mobile Sidebar Behavior ──────────────────────────────── */
@media(max-width:960px){
    .admin-sidebar{transform:translateX(-100%);width:260px}
    .admin-sidebar.sidebar-open{transform:translateX(0);box-shadow:4px 0 20px rgba(0,0,0,.3)}
    .admin-main{margin-left:0!important}
    .menu-toggle{display:block}
    .admin-topbar .container{padding:0 1rem}
    .hide-mobile-text{display:none}
}

/* ── Content Area ─────────────────────────────────────────── */
.admin-content{padding:2rem 2.2rem}

@media(max-width:768px){.admin-content{padding:1.2rem 1rem}}
@media(max-width:480px){.admin-content{padding:1rem .75rem}}

/* ── Cards ────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}
.card-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid #f0f0f0;flex-wrap:wrap;gap:.5rem}
.card-header h3{font-size:1rem;font-weight:600}

@media(max-width:600px){
    .card{padding:1rem}
    .card-header{flex-direction:column;align-items:flex-start}
}

/* ── Stat Cards ───────────────────────────────────────────── */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-bottom:2rem}
.stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1.3rem 1.5rem;display:flex;align-items:center;gap:1rem}
.stat-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.stat-icon.gold{background:rgba(201,168,76,.1);color:#c9a84c}
.stat-icon.blue{background:rgba(59,130,246,.1);color:#3b82f6}
.stat-icon.green{background:rgba(34,197,94,.1);color:#22c55e}
.stat-icon.red{background:rgba(239,68,68,.1);color:#ef4444}

.stat-info h4{font-size:1.5rem;font-weight:700;color:#1a1a1a;line-height:1.2}
.stat-info span{font-size:.8rem;color:#888}

@media(max-width:1024px){.stat-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
    .stat-cards{grid-template-columns:repeat(2,1fr);gap:.75rem}
    .stat-card{padding:1rem;gap:.7rem}
    .stat-icon{width:40px;height:40px;font-size:1rem;border-radius:8px}
    .stat-info h4{font-size:1.2rem}
    .stat-info span{font-size:.75rem}
}
@media(max-width:400px){.stat-cards{grid-template-columns:1fr}}

/* ── Tables ───────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;margin-top:.5rem;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.88rem}
thead{background:#f9fafb}
th{text-align:left;padding:.75rem 1rem;font-weight:600;color:#555;border-bottom:1.5px solid #e5e7eb;white-space:nowrap}
td{padding:.75rem 1rem;border-bottom:1px solid #f0f0f0;color:#333}
tbody tr:hover{background:#f9fafb}

@media(max-width:768px){
    .table-wrap{margin:0 -.5rem}
    th,td{padding:.5rem .6rem;font-size:.8rem}
}

/* ── Dashboard Tables in Panels ───────────────────────────── */
.panel .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media(max-width:600px){
    .panel .table{font-size:.78rem}
    .panel .table th,.panel .table td{padding:.45rem .5rem}
}

.status-badge{display:inline-block;padding:.2rem .65rem;border-radius:20px;font-size:.73rem;font-weight:600;text-transform:uppercase;letter-spacing:.03rem}
.status-active,.status-completed{background:#e6f9ee;color:#1a7a42}
.status-paid{background:#e6f9ee;color:#1a7a42}
.status-sent{background:#e8f4fd;color:#1a6fb5}
.status-overdue{background:#fdecea;color:#b42318}
.status-pending{background:#fef9e7;color:#9a7b2c}
.status-cancelled{background:#fdecea;color:#b42318}
.status-draft{background:#f0f0f0;color:#777}

/* ── Buttons (Admin) ──────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.3rem;border-radius:8px;font-weight:600;font-size:.85rem;border:none;cursor:pointer;transition:all .2s ease;white-space:nowrap}
.btn i{font-size:.8rem}
.btn-sm{padding:.4rem .9rem;font-size:.78rem;border-radius:6px}

.btn-primary{background:#c9a84c;color:#fff}
.btn-primary:hover{background:#b8933b;transform:translateY(-1px);box-shadow:0 4px 12px rgba(201,168,76,.3)}

.btn-gold{background:#c9a84c;color:#fff}
.btn-gold:hover{background:#b8933b}

.btn-outline{background:transparent;border:1.5px solid #ddd;color:#555}
.btn-outline:hover{border-color:#c9a84c;color:#c9a84c}

.btn-danger{background:#ef4444;color:#fff}
.btn-danger:hover{background:#dc2626}

.btn-success{background:#22c55e;color:#fff}
.btn-success:hover{background:#16a34a}

@media(max-width:600px){
    .btn{padding:.5rem 1rem;font-size:.8rem}
    .btn-sm{padding:.35rem .7rem;font-size:.73rem}
}

/* ── Forms ────────────────────────────────────────────────── */
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-size:.82rem;font-weight:600;color:#444;margin-bottom:.3rem}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.65rem .9rem;border:1.5px solid #ddd;border-radius:8px;font-size:.88rem;font-family:inherit;transition:border-color .2s ease}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#c9a84c}
.form-group textarea{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-actions{margin-top:1.5rem;display:flex;gap:.8rem;flex-wrap:wrap}

@media(max-width:600px){
    .form-row{grid-template-columns:1fr}
    .form-group input,.form-group select,.form-group textarea{font-size:.9rem;padding:.6rem .75rem}
}

/* ── Filter Forms ─────────────────────────────────────────── */
.flex.items-center.gap-1{flex-wrap:wrap}

@media(max-width:768px){
    .flex.items-center.gap-1{gap:.5rem!important}
    .flex.items-center.gap-1 input[type="text"],
    .flex.items-center.gap-1 select{max-width:100%!important;width:100%!important}
    .flex.items-center.gap-1 .btn{flex-shrink:0}
}

@media(max-width:480px){
    .flex.items-center.gap-1{flex-direction:column;align-items:stretch}
    .flex.items-center.gap-1 .btn{justify-content:center}
}

/* ── Flash Messages (admin) ───────────────────────────────── */
.flash{padding:.9rem 1.3rem;border-radius:8px;font-size:.88rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:.5rem;word-break:break-word}
.flash-success{background:#e6f9ee;color:#1a7a42;border:1px solid #b2e6c7}
.flash-error{background:#fdecea;color:#b42318;border:1px solid #f5c2c0}
.flash-info{background:#e8f4fd;color:#1a6fb5;border:1px solid #bddcf5}

@media(max-width:600px){.flash{padding:.65rem .9rem;font-size:.82rem}}

/* ── Empty State ──────────────────────────────────────────── */
.empty-state{text-align:center;padding:4rem 2rem;color:#999}
.empty-state i{font-size:3rem;color:#ddd;margin-bottom:1rem;display:block}
.empty-state p{font-size:.95rem;margin-top:.5rem}

@media(max-width:600px){.empty-state{padding:2.5rem 1rem}}

/* ── Pagination ───────────────────────────────────────────── */
.pagination{display:flex;justify-content:center;gap:.4rem;margin-top:2rem;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;border-radius:6px;font-size:.85rem;font-weight:500;border:1px solid #ddd;color:#555;transition:all .2s ease}
.pagination a:hover{border-color:#c9a84c;color:#c9a84c}
.pagination .active{background:#c9a84c;color:#fff;border-color:#c9a84c}

@media(max-width:600px){
    .pagination a,.pagination span{min-width:32px;height:32px;font-size:.78rem}
}

/* ── Modal Overlay ────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:2000;padding:1rem}
.modal{background:#fff;border-radius:14px;padding:2rem;max-width:520px;width:100%;max-height:90vh;overflow-y:auto}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.modal-header h3{font-size:1.1rem;font-weight:600}
.modal-close{background:none;border:none;font-size:1.4rem;cursor:pointer;color:#888}
.modal-close:hover{color:#1a1a1a}

@media(max-width:600px){
    .modal{padding:1.2rem;border-radius:1px}
    .modal-header h3{font-size:1rem}
}

/* ── Auth / Login Pages ────────────────────────────────────── */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a1a 0%,#2c2c2c 50%,#1a1a1a 100%);padding:2rem}

.auth-card{background:#fff;border-radius:16px;padding:2.5rem 2.2rem;width:100%;max-width:420px;box-shadow:0 12px 40px rgba(0,0,0,.35)}

.auth-header{text-align:center;margin-bottom:2rem}
.auth-header i{font-size:2.2rem;color:#c9a84c;margin-bottom:.8rem;display:block}
.auth-header h1{font-size:1.3rem;font-weight:700;color:#1a1a1a;margin-bottom:.35rem}
.auth-header p{font-size:.88rem;color:#888}

.auth-form .form-group{margin-bottom:1.1rem}
.auth-form .form-group label{display:block;font-size:.82rem;font-weight:600;color:#444;margin-bottom:.3rem}
.auth-form .form-group input{width:100%;padding:.7rem 1rem;border:1.5px solid #ddd;border-radius:8px;font-size:.9rem;font-family:inherit;transition:border-color .2s ease;background:#fafafa}
.auth-form .form-group input:focus{outline:none;border-color:#c9a84c;background:#fff}

.auth-form .btn{width:100%;justify-content:center;padding:.75rem;font-size:.95rem;margin-top:.5rem}

.alert{padding:.8rem 1.1rem;border-radius:8px;font-size:.88rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:.5rem}
.alert-error{background:#fdecea;color:#b42318;border:1px solid #f5c2c0}

.hint{text-align:center;margin-top:1.5rem}
.hint small{font-size:.78rem;color:#aaa}

@media(max-width:480px){
    .auth-page{padding:1rem}
    .auth-card{padding:1.8rem 1.5rem;border-radius:12px}
}

/* ── Dashboard Panels ─────────────────────────────────────── */
.dashboard .page-header{margin-bottom:1.5rem}
.dashboard .page-header h1{font-size:1.3rem;font-weight:700;color:#1a1a1a;margin-bottom:.25rem}
.dashboard .page-header p{font-size:.9rem;color:#888}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-bottom:2rem}
.stats-grid .stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1.3rem 1.5rem;display:flex;align-items:center;gap:1rem}
.stats-grid .stat-card.highlight{border-left:4px solid #c9a84c}
.stats-grid .stat-card.income{border-left:4px solid #22c55e}
.stats-grid .stat-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;background:rgba(201,168,76,.1);color:#c9a84c}
.stats-grid .stat-content h3{font-size:1.5rem;font-weight:700;color:#1a1a1a;line-height:1.2}
.stats-grid .stat-content span{font-size:.8rem;color:#888}

.panels{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.panel{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1.5rem;overflow:hidden}
.panel h2{font-size:1rem;font-weight:600;margin-bottom:1rem;color:#1a1a1a}
.panel .table{width:100%;border-collapse:collapse;font-size:.85rem}
.panel .table th{text-align:left;padding:.6rem .7rem;font-weight:600;color:#555;border-bottom:1.5px solid #e5e7eb;background:#f9fafb}
.panel .table td{padding:.6rem .7rem;border-bottom:1px solid #f0f0f0;color:#333}

.badge{display:inline-block;padding:.2rem .6rem;border-radius:20px;font-size:.73rem;font-weight:600;text-transform:uppercase;letter-spacing:.03rem}
.badge-active,.badge-confirmed,.badge-completed{background:#e6f9ee;color:#1a7a42}
.badge-pending{background:#fef9e7;color:#9a7b2c}
.badge-cancelled{background:#fdecea;color:#b42318}
.badge-draft{background:#f0f0f0;color:#777}

@media(max-width:1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
    .panels{grid-template-columns:1fr}
    .panel{padding:1.2rem}
}
@media(max-width:600px){
    .stats-grid{grid-template-columns:1fr}
    .stats-grid .stat-card{padding:1rem;gap:.75rem}
    .stats-grid .stat-icon{width:40px;height:40px;font-size:1rem}
    .stats-grid .stat-content h3{font-size:1.2rem}
    .stats-grid .stat-content span{font-size:.75rem}
    .panel{padding:1rem}
}

/* ── Page Headers ─────────────────────────────────────────── */
.page-header{margin-bottom:1.5rem}
.page-header h1{font-size:1.3rem;font-weight:700;color:#1a1a1a;margin-bottom:.25rem}
.page-header p{font-size:.9rem;color:#888}

@media(max-width:600px){
    .page-header h1{font-size:1.1rem}
    .page-header p{font-size:.82rem}
}

/* ── Misc ─────────────────────────────────────────────────── */
.text-muted{color:#888;font-size:.85rem}
.text-right{text-align:right}
.mt-1{margin-top:1rem}
.mb-1{margin-bottom:1rem}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-1{gap:1rem}

@media(max-width:600px){
    .text-right{text-align:left}
    .hide-mobile-text{display:none}
}