/* ============================================================
   Pool Towel Manager — CSS
   Touch-first responsive design | Sotelho Branding
   ============================================================ */
:root {
    --navy: #151f42; --blue: #4568dc; --light-blue: #6b82e6; --accent: #b06ab3;
    --green: #27AE60; --red: #E74C3C; --yellow: #F1C40F;
    --dark: #1a1a2e; --gray: #7F8C8D; --light: #F3F4F8; --white: #FFFFFF;
    --border: #DEE2E6; --shadow: 0 2px 8px rgba(21,31,66,0.10);
    --gradient: linear-gradient(135deg, #4568dc, #b06ab3);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',Arial,sans-serif; background:var(--light); color:var(--dark); min-height:100vh; }

/* Top bar */
.topbar { background:var(--navy); color:var(--white); padding:10px 16px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:100; box-shadow:0 2px 12px rgba(21,31,66,0.25); }
.topbar h1 { font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; }
.topbar .user-info { font-size:13px; display:flex; align-items:center; gap:10px; }
.topbar .role-badge { background:var(--accent); padding:2px 8px; border-radius:10px; font-size:11px; text-transform:uppercase; }
.topbar button { background:rgba(255,255,255,0.12); border:none; color:white; padding:6px 12px; border-radius:6px; cursor:pointer; font-size:13px; }
.topbar button:hover { background:rgba(255,255,255,0.22); }

/* Navigation */
.nav-tabs { display:flex; background:var(--white); border-bottom:2px solid var(--border); overflow-x:auto; padding:0 8px; }
.nav-tabs button { flex:0 0 auto; padding:10px 16px; border:none; background:none; color:var(--gray); font-size:13px; font-weight:500; cursor:pointer; border-bottom:3px solid transparent; transition:all 0.2s; white-space:nowrap; }
.nav-tabs button.active { color:var(--navy); border-bottom-color:var(--blue); }
.nav-tabs button:hover { color:var(--navy); background:var(--light); }

/* Pages */
.page { display:none; padding:16px; max-width:1200px; margin:0 auto; }
.page.active { display:block; }

/* Stat cards */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:16px; }
.stat-card { background:var(--white); border-radius:10px; padding:16px; text-align:center; box-shadow:var(--shadow); border-left:4px solid var(--blue); }
.stat-card.green { border-left-color:var(--green); }
.stat-card.accent { border-left-color:var(--accent); }
.stat-card.red { border-left-color:var(--red); }
.stat-card.yellow { border-left-color:var(--yellow); }
.stat-card .value { font-size:28px; font-weight:700; color:var(--navy); }
.stat-card .label { font-size:12px; color:var(--gray); margin-top:4px; text-transform:uppercase; letter-spacing:0.5px; }
.stat-card .sublabel { font-size:11px; color:var(--gray); margin-top:2px; }

/* Big action buttons */
.action-buttons { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.btn-action { padding:24px 16px; border:none; border-radius:12px; font-size:18px; font-weight:700; color:white; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; transition:transform 0.1s; box-shadow:var(--shadow); }
.btn-action:active { transform:scale(0.97); }
.btn-action .icon { font-size:32px; }
.btn-deliver { background:linear-gradient(135deg,var(--green),#2ecc71); }
.btn-return { background:var(--gradient); }

/* Tables */
.data-table { width:100%; border-collapse:collapse; background:var(--white); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); margin-bottom:16px; }
.data-table th { background:var(--navy); color:white; padding:10px 12px; text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
.data-table td { padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; }
.data-table tr:hover { background:var(--light); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr.clickable { cursor:pointer; }
.data-table tr.clickable:hover { background:#ede7f6; }

/* Badges */
.time-badge { display:inline-block; padding:3px 8px; border-radius:12px; font-size:11px; font-weight:600; }
.time-badge.ok { background:#E8F5E9; color:var(--green); }
.time-badge.warning { background:#FFF8E1; color:#F57F17; }
.time-badge.danger { background:#FFEBEE; color:var(--red); }
.status-badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; text-transform:uppercase; }
.status-badge.active { background:#ede7f6; color:var(--blue); }
.status-badge.returned { background:#E8F5E9; color:var(--green); }
.status-badge.lost { background:#FFEBEE; color:var(--red); }

/* Modal */
.modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(21,31,66,0.55); z-index:200; align-items:center; justify-content:center; }
.modal-overlay.active { display:flex; }
.modal { background:var(--white); border-radius:16px; width:90%; max-width:480px; max-height:90vh; overflow-y:auto; box-shadow:0 8px 32px rgba(21,31,66,0.3); }
.modal-header { background:var(--navy); color:white; padding:16px 20px; border-radius:16px 16px 0 0; display:flex; justify-content:space-between; align-items:center; }
.modal-header h3 { font-size:16px; display:flex; align-items:center; gap:8px; }
.modal-close { background:none; border:none; color:white; font-size:22px; cursor:pointer; padding:4px; }
.modal-body { padding:20px; }

/* Forms */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--dark); margin-bottom:6px; }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:12px; border:2px solid var(--border); border-radius:8px; font-size:16px; transition:border-color 0.2s; font-family:inherit; }
.form-group input:focus,.form-group select:focus { border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(69,104,220,0.15); }
.form-group .hint { font-size:11px; color:var(--gray); margin-top:4px; }
.input-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Type selector */
.type-selector { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.type-btn { padding:14px; border:2px solid var(--border); border-radius:10px; background:var(--white); font-size:14px; font-weight:600; cursor:pointer; text-align:center; transition:all 0.2s; }
.type-btn.selected { border-color:var(--blue); background:#ede7f6; color:var(--blue); }

/* Qty selector */
.qty-selector { display:flex; gap:8px; align-items:center; }
.qty-btn { width:48px; height:48px; border:2px solid var(--border); border-radius:10px; background:var(--white); font-size:20px; font-weight:700; cursor:pointer; transition:border-color 0.2s; }
.qty-btn:hover { border-color:var(--blue); }
.qty-value { font-size:28px; font-weight:700; color:var(--navy); min-width:40px; text-align:center; }

/* Buttons */
.btn { padding:10px 20px; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.2s; display:inline-flex; align-items:center; gap:6px; }
.btn-primary { background:var(--blue); color:white; }
.btn-primary:hover { background:#3a5bc7; }
.btn-success { background:var(--green); color:white; }
.btn-danger { background:var(--red); color:white; }
.btn-danger:hover { opacity:0.9; }
.btn-accent { background:var(--accent); color:white; }
.btn-accent:hover { background:#9c5b9e; }
.btn-outline { background:transparent; border:2px solid var(--border); color:var(--dark); }
.btn-lg { padding:14px 28px; font-size:16px; }
.btn-block { width:100%; justify-content:center; }
.btn:hover { box-shadow:var(--shadow); }
.btn:disabled { opacity:0.5; cursor:not-allowed; }

/* Guest info */
.guest-info { background:#ede7f6; border:1px solid #b39ddb; border-radius:8px; padding:12px; margin:8px 0; }
.guest-info .name { font-size:16px; font-weight:700; color:var(--navy); }
.guest-info .detail { font-size:12px; color:var(--gray); }
.guest-info.vip { background:#FFF8E1; border-color:var(--yellow); }
.guest-info.not-found { background:#FFF3E0; border-color:#FFB74D; }

/* Confirm card */
.confirm-card { background:var(--light); border-radius:10px; padding:16px; margin:12px 0; }
.confirm-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border); font-size:14px; }
.confirm-row:last-child { border-bottom:none; }
.confirm-row .label { color:var(--gray); }
.confirm-row .value { font-weight:600; color:var(--navy); }

/* Login */
.login-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--navy); background-image:radial-gradient(ellipse at 30% 50%, rgba(69,104,220,0.3) 0%, transparent 60%), radial-gradient(ellipse at 70% 50%, rgba(176,106,179,0.25) 0%, transparent 60%); }
.login-card { background:white; border-radius:16px; padding:32px; width:90%; max-width:360px; box-shadow:0 8px 40px rgba(21,31,66,0.35); text-align:center; }
.login-card h2 { color:var(--navy); font-size:20px; margin-bottom:4px; }
.login-card .subtitle { color:var(--gray); font-size:13px; margin-bottom:24px; }
.login-card .logo { font-size:48px; margin-bottom:12px; }
.login-card .form-group { text-align:left; }
.login-card .btn { margin-top:8px; background:var(--gradient); }
.login-card .btn:hover { box-shadow:0 4px 16px rgba(69,104,220,0.35); }

/* Close shift */
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.summary-item { padding:10px; background:var(--light); border-radius:8px; text-align:center; }
.summary-item .val { font-size:22px; font-weight:700; color:var(--navy); }
.summary-item .lbl { font-size:11px; color:var(--gray); text-transform:uppercase; }

/* Toast */
.toast-container { position:fixed; top:60px; right:16px; z-index:300; display:flex; flex-direction:column; gap:8px; }
.toast { padding:12px 20px; border-radius:8px; color:white; font-size:14px; font-weight:500; box-shadow:0 4px 12px rgba(21,31,66,0.2); animation:slideIn 0.3s ease; min-width:200px; }
.toast.success { background:var(--green); }
.toast.error { background:var(--red); }
.toast.warning { background:var(--accent); }
@keyframes slideIn { from{transform:translateX(100px);opacity:0} to{transform:translateX(0);opacity:1} }

/* Section headers / filter */
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.section-header h3 { font-size:16px; color:var(--navy); }
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; background:var(--white); padding:12px; border-radius:8px; box-shadow:var(--shadow); }
.filter-bar input,.filter-bar select { padding:8px 12px; border:1px solid var(--border); border-radius:6px; font-size:13px; }

.empty-state { text-align:center; padding:40px 20px; color:var(--gray); }
.empty-state .icon { font-size:48px; margin-bottom:12px; }

.app-container { display:none; }
.app-container.active { display:block; }

.db-status { display:inline-flex; align-items:center; gap:4px; font-size:12px; padding:2px 8px; border-radius:10px; }
.db-status.ok { background:#E8F5E9; color:var(--green); }
.db-status.error { background:#FFEBEE; color:var(--red); }
.db-status.unknown { background:#FFF8E1; color:#F57F17; }

@media (max-width:600px) {
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .stat-card .value { font-size:22px; }
    .action-buttons { grid-template-columns:1fr; }
    .data-table { font-size:12px; }
    .data-table th,.data-table td { padding:8px; }
    .input-row { grid-template-columns:1fr; }
    .filter-bar { flex-direction:column; }
    .nav-tabs button { padding:8px 12px; font-size:12px; }
}