/* ===== CSS Variables - Golden Theme ===== */
:root {
    --primary: #d4af37;
    --primary-dark: #b8941f;
    --primary-light: #f4d03f;
    --secondary: #64748b;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;
    --light: #f8fafc;
    --dark: #1e293b;
    --gray: #94a3b8;
    --border: #e2e8f0;
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --radius: 8px;
    --radius-lg: 12px;
    --sidebar-width: 260px;
    --header-height: 60px;
    --gold-gradient: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
    --dark-gradient: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; background:#f1f5f9; color:var(--dark); line-height:1.6; }

/* ===== Login ===== */
.login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--dark-gradient); padding:20px; }
.login-box { background:white; padding:50px; border-radius:var(--radius-lg); box-shadow:0 20px 60px rgba(0,0,0,0.3); width:100%; max-width:450px; border:3px solid var(--primary); }
.company-logo { text-align:center; margin-bottom:30px; }
.logo-icon { font-size:70px; margin-bottom:15px; animation:float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.company-name { font-size:28px; color:var(--primary-dark); font-weight:700; margin-bottom:5px; }
.company-location { font-size:16px; color:var(--secondary); margin-bottom:15px; }
.golden-line { width:80px; height:4px; background:var(--gold-gradient); margin:0 auto; border-radius:2px; }
.system-title { text-align:center; font-size:20px; color:var(--dark); margin-bottom:30px; font-weight:600; }
.login-footer { text-align:center; margin-top:30px; padding-top:20px; border-top:1px solid var(--border); color:var(--secondary); font-size:13px; }

/* ===== App Layout ===== */
.hidden { display:none !important; }
.app { display:flex; min-height:100vh; }

/* ===== Sidebar ===== */
.sidebar { width:var(--sidebar-width); background:linear-gradient(180deg,#1a365d 0%,#234876 100%); color:white; position:fixed; top:0; height:100vh; display:flex; flex-direction:column; z-index:100; transition:transform 0.3s ease; box-shadow:-5px 0 20px rgba(0,0,0,0.1); overflow-y:auto; }
[dir="rtl"] .sidebar { right:0; }
[dir="ltr"] .sidebar { left:0; }
.sidebar-header { padding:20px 15px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(212,175,55,0.3); background:rgba(0,0,0,0.1); }
.sidebar-brand { display:flex; align-items:center; gap:10px; flex:1; }
.brand-icon { font-size:28px; }
.brand-text { display:flex; flex-direction:column; }
.brand-name { font-size:14px; font-weight:700; color:var(--primary); }
.brand-sub { font-size:11px; color:rgba(255,255,255,0.7); }
.close-sidebar { display:none; background:none; border:none; color:white; font-size:20px; cursor:pointer; }
.sidebar-nav { flex:1; padding:10px 0; overflow-y:auto; }
.nav-item { display:flex; align-items:center; gap:10px; padding:11px 18px; color:rgba(255,255,255,0.8); text-decoration:none; transition:all 0.2s; font-size:14px; }
[dir="rtl"] .nav-item { border-right:3px solid transparent; }
[dir="ltr"] .nav-item { border-left:3px solid transparent; }
.nav-item:hover, .nav-item.active { background:rgba(212,175,55,0.15); color:white; }
[dir="rtl"] .nav-item:hover, [dir="rtl"] .nav-item.active { border-right-color:var(--primary); }
[dir="ltr"] .nav-item:hover, [dir="ltr"] .nav-item.active { border-left-color:var(--primary); }
.nav-item i { width:22px; text-align:center; color:var(--primary); font-size:14px; }
.nav-divider { height:1px; background:rgba(255,255,255,0.1); margin:8px 15px; }
.sidebar-footer { padding:15px; border-top:1px solid rgba(212,175,55,0.3); background:rgba(0,0,0,0.1); }
.user-info { display:flex; align-items:center; gap:8px; margin-bottom:10px; color:rgba(255,255,255,0.9); font-size:13px; }
.user-info i { font-size:18px; color:var(--primary); }
.footer-actions { display:flex; gap:8px; }
.footer-actions .btn { flex:1; justify-content:center; }

/* ===== Main Content ===== */
.main-content { flex:1; padding:20px; background:#f8fafc; min-height:100vh; }
[dir="rtl"] .main-content { margin-right:var(--sidebar-width); }
[dir="ltr"] .main-content { margin-left:var(--sidebar-width); }

/* ===== Header ===== */
.header { background:white; padding:12px 20px; border-radius:var(--radius); box-shadow:var(--shadow); display:flex; align-items:center; gap:12px; margin-bottom:20px; border-bottom:3px solid var(--primary); }
.menu-toggle { display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--dark); }
.header-brand { display:flex; align-items:center; gap:8px; flex:1; }
.header-icon { font-size:22px; }
.header h2 { font-size:18px; color:var(--dark); }
.header-actions { display:flex; align-items:center; gap:10px; color:var(--secondary); font-size:13px; }
.btn-lang { background:var(--dark-gradient); color:var(--primary); font-weight:700; border:2px solid var(--primary); padding:6px 14px; }
.btn-lang:hover { background:var(--primary); color:var(--dark); }

/* ===== Welcome Banner ===== */
.welcome-banner { background:var(--dark-gradient); color:white; padding:25px; border-radius:var(--radius-lg); margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 10px 30px rgba(26,54,93,0.3); }
.welcome-content h2 { font-size:20px; margin-bottom:6px; color:var(--primary); }
.welcome-content p { opacity:0.9; font-size:14px; }
.welcome-logo { font-size:50px; opacity:0.9; }

/* ===== Pages ===== */
.page { display:none; }
.page.active { display:block; animation:fadeIn 0.3s ease; }
.page-actions { margin-bottom:20px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.payroll-period { display:flex; gap:5px; align-items:center; }
.payroll-period select, .payroll-period input { padding:8px; border:2px solid var(--border); border-radius:var(--radius); }

/* ===== Cards ===== */
.card { background:white; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; border:1px solid var(--border); }
.card-header { padding:15px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; background:linear-gradient(to left,rgba(212,175,55,0.05),transparent); flex-wrap:wrap; }
.card-header h3 { font-size:16px; display:flex; align-items:center; gap:8px; color:var(--dark); }
.card-header h3 i { color:var(--primary); }
.card-body { padding:20px; }
.mt-4 { margin-top:20px; }

/* ===== Stats ===== */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-bottom:20px; }
.stat-card { background:white; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; display:flex; align-items:center; gap:15px; border:1px solid var(--border); transition:transform 0.2s; }
.stat-card:hover { transform:translateY(-3px); box-shadow:0 10px 25px rgba(0,0,0,0.1); }
.stat-icon { width:55px; height:55px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; color:white; }
.bg-success{background:linear-gradient(135deg,#10b981,#059669);} .bg-danger{background:linear-gradient(135deg,#ef4444,#dc2626);} .bg-warning{background:linear-gradient(135deg,#f59e0b,#d97706);} .bg-info{background:linear-gradient(135deg,#3b82f6,#2563eb);}
.stat-info h3 { font-size:22px; color:var(--dark); font-weight:700; }
.stat-info p { color:var(--secondary); font-size:13px; }

/* ===== Tables ===== */
.table-responsive { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:12px; border-bottom:1px solid var(--border); font-size:13px; }
[dir="rtl"] .table th, [dir="rtl"] .table td { text-align:right; }
[dir="ltr"] .table th, [dir="ltr"] .table td { text-align:left; }
.table th { background:linear-gradient(to bottom,#f8fafc,#f1f5f9); font-weight:600; color:var(--dark); border-top:2px solid var(--primary); }
.table tr:hover { background:rgba(212,175,55,0.03); }
.text-center { text-align:center !important; }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border:none; border-radius:var(--radius); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.btn-primary { background:var(--gold-gradient); color:#1a365d; box-shadow:0 4px 15px rgba(212,175,55,0.4); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(212,175,55,0.5); }
.btn-secondary { background:var(--secondary); color:white; }
.btn-success { background:var(--success); color:white; }
.btn-danger { background:var(--danger); color:white; }
.btn-warning { background:var(--warning); color:white; }
.btn-sm { padding:7px 14px; font-size:12px; }
.btn-block { width:100%; justify-content:center; }
.btn-icon { padding:6px; background:none; border:none; cursor:pointer; color:var(--secondary); transition:all 0.2s; border-radius:4px; }
.btn-icon:hover { color:var(--primary); background:rgba(212,175,55,0.1); }
.btn-icon.danger:hover { color:var(--danger); background:rgba(239,68,68,0.1); }

/* ===== Forms ===== */
.form-group { margin-bottom:15px; }
.form-group label { display:block; margin-bottom:5px; font-weight:600; font-size:13px; color:var(--dark); }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px 12px; border:2px solid var(--border); border-radius:var(--radius); font-size:13px; transition:all 0.2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(212,175,55,0.1); }
.form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:15px; }
.search-input { padding:8px 12px; border:2px solid var(--border); border-radius:var(--radius); width:220px; transition:all 0.2s; font-size:13px; }
.search-input:focus { border-color:var(--primary); outline:none; }

/* ===== Modals ===== */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:1000; align-items:center; justify-content:center; padding:20px; }
.modal.active { display:flex; }
.modal-content { background:white; border-radius:var(--radius-lg); width:100%; max-width:500px; max-height:90vh; overflow-y:auto; animation:modalSlide 0.3s ease; border:2px solid var(--primary); }
.modal-lg { max-width:900px; }
@keyframes modalSlide { from{opacity:0;transform:translateY(-30px);} to{opacity:1;transform:translateY(0);} }
.modal-header { padding:18px 20px; border-bottom:2px solid var(--primary); display:flex; align-items:center; justify-content:space-between; background:linear-gradient(to left,rgba(212,175,55,0.1),transparent); }
.modal-header h3 { font-size:16px; color:var(--dark); }
.close-modal { background:none; border:none; font-size:26px; cursor:pointer; color:var(--secondary); }
.close-modal:hover { color:var(--danger); }
.modal form { padding:20px; }
.modal-footer { display:flex; gap:10px; justify-content:flex-end; padding-top:15px; border-top:1px solid var(--border); margin-top:15px; }

/* ===== Invoice Items ===== */
.invoice-items { margin:20px 0; padding:15px; background:linear-gradient(to bottom,#f8fafc,#f1f5f9); border-radius:var(--radius); border:1px solid var(--border); }
.invoice-items h4 { margin-bottom:12px; font-size:14px; color:var(--dark); font-weight:600; }
.invoice-total { padding:15px 20px; font-size:18px; background:var(--dark-gradient); color:white; border-radius:var(--radius); margin:15px 0; font-weight:700; text-align:center; }
.invoice-total strong { color:var(--primary); font-size:22px; }

/* ===== Reports ===== */
.report-filters { background:linear-gradient(to bottom,#f8fafc,#f1f5f9); padding:20px; border-radius:var(--radius); border:1px solid var(--border); }
.report-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:15px; }
.summary-item { background:white; padding:15px 18px; border-radius:var(--radius); display:flex; justify-content:space-between; align-items:center; border:1px solid var(--border); box-shadow:var(--shadow); }
.summary-item.total { background:var(--dark-gradient); color:white; grid-column:1/-1; border:2px solid var(--primary); }
.summary-item.total strong { color:var(--primary); }
.summary-item strong { font-size:18px; color:var(--dark); }

/* ===== Statements ===== */
.stmt-tabs { display:flex; gap:5px; }
.stmt-tab { padding:8px 16px; border:2px solid var(--border); border-radius:var(--radius); background:white; cursor:pointer; font-size:12px; font-weight:600; transition:all 0.2s; }
.stmt-tab.active { background:var(--gold-gradient); color:#1a365d; border-color:var(--primary); }
.stmt-content { display:none; }
.stmt-content.active { display:block; }
.stmt-section { margin-bottom:20px; }
.stmt-section h4 { color:var(--primary-dark); margin-bottom:10px; font-size:16px; padding-bottom:5px; border-bottom:2px solid var(--primary); }
.stmt-total td { background:#f1f5f9; font-weight:700; border-top:2px solid var(--dark); }
.stmt-net { padding:15px 20px; border-radius:var(--radius); text-align:center; font-size:18px; margin-top:15px; }
.stmt-net.profit { background:#d1fae5; color:#065f46; }
.stmt-net.loss { background:#fee2e2; color:#991b1b; }
.stmt-net span { font-size:24px; font-weight:700; }
.stmt-balance-check { text-align:center; padding:10px; background:#f0f9ff; border-radius:var(--radius); margin-top:10px; color:#1e40af; }

/* ===== Ledger ===== */
.ledger-opening td, .ledger-closing td { background:#f1f5f9; font-weight:600; color:var(--primary-dark); }

/* ===== Backup ===== */
.backup-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-bottom:25px; }
.backup-card { background:white; padding:25px; border-radius:var(--radius-lg); text-align:center; border:2px solid var(--border); transition:all 0.3s; }
.backup-card:hover { border-color:var(--primary); transform:translateY(-5px); box-shadow:0 15px 35px rgba(0,0,0,0.1); }
.backup-icon { width:60px; height:60px; background:var(--gold-gradient); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 15px; font-size:24px; color:#1a365d; }
.backup-card h4 { font-size:16px; margin-bottom:8px; }
.backup-card p { color:var(--secondary); margin-bottom:15px; font-size:13px; }
.backup-info { background:linear-gradient(to bottom,#f8fafc,#f1f5f9); padding:20px; border-radius:var(--radius); border:1px solid var(--border); }
.backup-info h4 { margin-bottom:15px; display:flex; align-items:center; gap:8px; }
.backup-info h4 i { color:var(--primary); }
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.info-item { background:white; padding:12px 15px; border-radius:var(--radius); display:flex; justify-content:space-between; align-items:center; border:1px solid var(--border); }
.info-item strong { color:var(--primary-dark); }

/* ===== Settings ===== */
.storage-indicator { font-size:16px; font-weight:700; color:var(--primary-dark); background:#f8fafc; padding:10px 15px; border-radius:var(--radius); border:1px solid var(--border); display:inline-block; }

/* ===== Badges ===== */
.badge { padding:4px 12px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-success { background:#d1fae5; color:#065f46; }
.badge-warning { background:#fef3c7; color:#92400e; }
.badge-danger { background:#fee2e2; color:#991b1b; }

/* ===== Notifications ===== */
.notification { position:fixed; top:20px; left:50%; transform:translateX(-50%); padding:14px 24px; border-radius:var(--radius); color:white; font-weight:500; z-index:9999; display:flex; align-items:center; gap:10px; box-shadow:0 10px 40px rgba(0,0,0,0.2); font-size:14px; }
.notification-success { background:linear-gradient(135deg,#10b981,#059669); }
.notification-error { background:linear-gradient(135deg,#ef4444,#dc2626); }
@keyframes slideDown { from{opacity:0;transform:translateX(-50%) translateY(-20px);} to{opacity:1;transform:translateX(-50%) translateY(0);} }

/* ===== Print ===== */
.print-area { padding:25px; }
@media print {
    body * { visibility:hidden; }
    .print-area, .print-area * { visibility:visible; }
    .print-area { position:absolute; left:0; top:0; width:100%; }
    .modal-footer, .modal-header button { display:none; }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { background:#f1f5f9; }
::-webkit-scrollbar-thumb { background:var(--primary); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary-dark); }

/* ===== Permissions ===== */
.perm-label { display:flex; align-items:center; gap:5px; padding:4px 8px; border-radius:4px; cursor:pointer; font-size:12px; transition:background 0.2s; }
.perm-label:hover { background:rgba(212,175,55,0.1); }
.perm-label input { accent-color:var(--primary); }

.wallet-tab { padding:8px 16px; border:2px solid var(--border); border-radius:var(--radius); background:white; cursor:pointer; font-size:12px; font-weight:600; transition:all 0.2s; }
.wallet-tab.active { background:var(--gold-gradient); color:#1a365d; border-color:var(--primary); }
.wallet-content { display:none; }
.wallet-content.active { display:block; }

.inv-tab { padding:8px 16px; border:2px solid var(--border); border-radius:var(--radius); background:white; cursor:pointer; font-size:12px; font-weight:600; transition:all 0.2s; }
.inv-tab.active { background:var(--gold-gradient); color:#1a365d; border-color:var(--primary); }
.inv-content { display:none; }
.inv-content.active { display:block; }

/* ===== Wallet Order Cards ===== */
.wo-order-card { background:#f8fafc; border:2px solid #e2e8f0; border-radius:10px; padding:15px; margin-bottom:12px; position:relative; transition:border-color 0.2s; }
.wo-order-card:hover { border-color:#d4af37; }
.wo-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid #d4af37; }
.wo-card-num { font-weight:700; color:#1a365d; font-size:15px; }
.wo-order-card .form-row { gap:10px; }
.wo-order-card .form-group { margin-bottom:8px; }
.wo-order-card .form-group label { font-size:11px; margin-bottom:3px; }
.wo-order-card .form-group input, .wo-order-card .form-group select { padding:7px 10px; font-size:13px; }

/* ===== Animations ===== */
@keyframes fadeIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }

/* ===== Responsive ===== */
@media (max-width:768px) {
    .sidebar { transform:translateX(100%); }
    [dir="ltr"] .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .main-content { margin-right:0 !important; margin-left:0 !important; }
    .menu-toggle { display:block; }
    .close-sidebar { display:block; }
    .welcome-banner { flex-direction:column; text-align:center; gap:15px; }
    .stats-grid { grid-template-columns:1fr; }
    .header { flex-wrap:wrap; }
    .search-input { width:100%; }
    .modal-content { max-width:100%; margin:10px; }
    .form-row { grid-template-columns:1fr; }
    .report-summary { grid-template-columns:1fr; }
    .backup-options { grid-template-columns:1fr; }
    .login-box { padding:30px 20px; }
    .page-actions { flex-direction:column; }
    .stmt-tabs { flex-wrap:wrap; }
}

/* ===== Cloud Status Indicator ===== */
.cloud-status { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; font-size:11px; font-weight:600; cursor:default; transition:all 0.3s; }
.cloud-status.connected { background:#d1fae5; color:#065f46; }
.cloud-status.syncing { background:#fef3c7; color:#92400e; animation:pulse 1s infinite; }
.cloud-status.offline { background:#fee2e2; color:#991b1b; }
.cloud-status.error { background:#fee2e2; color:#991b1b; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.6;} }

/* ===== Cloud Loading Screen ===== */
.cloud-loader { position:fixed; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg,#1a365d 0%,#2c5282 100%); z-index:99999; display:flex; align-items:center; justify-content:center; flex-direction:column; color:white; transition:opacity 0.5s; }
.cloud-loader.hidden { opacity:0; pointer-events:none; }
.cloud-loader-bar { width:200px; height:4px; background:rgba(255,255,255,0.2); border-radius:2px; margin-top:20px; overflow:hidden; }
.cloud-loader-fill { width:100%; height:100%; background:linear-gradient(90deg,#d4af37,#f4d03f); animation:loadingSlide 1.5s infinite; }
@keyframes loadingSlide { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }