/* Import Google Fonts for consistent typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Minimal styles - Most styling now handled by Tailwind CSS */
body {
    font-family: 'Inter', sans-serif;
}

/* Custom styles for elements not easily replaced by Tailwind */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table th, .table td {
    padding: 8px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
    }

    .table th, .table td {
        padding: 8px;
    }
}

/* Sidebar collapsed behavior and overrides */
.sidebar {
    width: 16rem; /* 64 - Updated for better look */
    transition: width .3s;
    font-size: .875rem; /* slightly smaller sidebar text */
}
.sidebar.minimized {
    width: 4.5rem; /* collapsed */
}
.sidebar .company-name,
.sidebar .user-name,
.sidebar a span {
    transition: opacity .15s;
}
.sidebar.minimized .company-name,
.sidebar.minimized .user-name,
.sidebar.minimized a span {
    opacity: 0;
    pointer-events: none;
}
.sidebar.minimized .user-info img { width: 40px; height: 40px; }
/* Make sidebar links use slate hover color */
.sidebar a { transition: background-color .15s; }
.sidebar a:hover { background-color: #334155; } /* slate-700 */

/* Ensure page content doesn't get hidden under the fixed sidebar.
   Use .content as the main page wrapper (many pages already have this class).
   When the sidebar is minimized, shrink the left margin accordingly. */
.content { margin-left: 16rem; transition: margin-left .3s ease; }
.sidebar.minimized + .content,
body.sidebar-collapsed .content { margin-left: 4.5rem; }
@media (max-width: 1024px) {
    .content { margin-left: 0; }
}

/* Submenu helpers */
.has-submenu .submenu { transition: max-height .2s ease, padding .2s ease; }
.has-submenu .submenu li a { padding-left: 2.25rem; }
.has-submenu .submenu-chevron { transition: transform .2s ease; margin-left: .5rem; }
.has-submenu.open .submenu-chevron { transform: rotate(90deg); }
.has-submenu .submenu.hidden { display: none; }
.has-submenu .submenu { display: block; }


/* Responsive slide behavior: on small screens sidebar is off-canvas */
.sidebar { transform: translateX(0); transition: transform .3s, width .3s; }
@media (max-width: 1024px) {
    /* on mobile make the sidebar a bit wider for easier navigation */
    .sidebar { transform: translateX(-100%); width: 16rem; }
    body.sidebar-open .sidebar { transform: translateX(0); width: 16rem; }
    /* Remove left margin on content on small screens so sidebar overlays */
    .content { margin-left: 0 !important; }
} 

/* show overlay when body has sidebar-open (JS toggles .hidden on overlay element too) */
body.sidebar-open #sidebarOverlay { display: block !important; background-color: rgba(0,0,0,0.6) !important; }

/* ensure overlay hidden by default */
#sidebarOverlay { display: none; }

/* ------------------------
   Helper styles moved from per-page inline CSS
   Keep these small and focused while we convert pages to Tailwind.
   ------------------------ */

/* Page container / layout */
.container {
    max-width: 1100px;
    margin: 20px auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Tables (basic neutral styling) */
.table {
    width: 100%;
    border-collapse: collapse;
}
.table th,
.table td {
    padding: 0.75rem;
    border: 1px solid #e5e7eb; /* gray-200 */
    text-align: left;
}
.table th {
    background-color: #f8fafc; /* slate-50 */
    font-weight: 600;
    text-align: center;
}
.table td { text-align: center; }

/* Buttons (small utility styles to replace Bootstrap quickly) */
.btn { display: inline-block; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; }
.btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: none; }
.btn-secondary { background: #6b7280; color: #fff; border: none; }
.btn:hover { opacity: .95; }

/* Equal height helper used in report filters */
.btn-equal-height { height: calc(1.5em + .75rem + 2px); }

/* Login page helpers moved here */
.login-container { max-width: 400px; margin: 100px auto; padding: 30px; background-color: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.login-card { width: 100%; max-width: 400px; border-radius: 20px; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.1); overflow: hidden; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); }
.login-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px 20px; text-align: center; }
.login-header h2 { margin: 0; font-weight: 700; font-size: 24px; }
.login-body { padding: 30px 25px; }
.form-control { border-radius: 10px; border: 1px solid #e1e5e9; padding: 12px 15px; font-size: 16px; }
.form-control:focus { border-color: #667eea; box-shadow: 0 0 0 0.2rem rgba(102,126,234,0.25); }
.input-group-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 10px 0 0 10px; padding: 12px 15px; }
.btn-login { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 10px; padding: 12px; font-weight: 600; font-size: 16px; width: 100%; }
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102,126,234,0.4); }

/* Shared page UI helpers (used for consistent headers, buttons, cards, and tables) */
.page-title { font-size: 1.25rem; margin: 0; }
.page-subtitle { margin-top: 0.125rem; color: #6b7280; }
.actions a, .actions button { display: inline-flex; align-items: center; gap: 0.5rem; }

.primary-btn { background: linear-gradient(90deg, #06b6d4 0%, #0ea5e9 100%); color: #fff; border: none; }
.secondary-btn { background: #111827; color: #fff; border: none; }

.card { background: #fff; padding: 1.25rem; border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(17,24,39,0.04); }
.kpi-card { padding: 1rem; border-radius: 0.5rem; box-shadow: 0 2px 8px rgba(15,23,42,0.03); background: #fff; }
.kpi-card .label { color: #6b7280; font-size: 0.875rem; }
.kpi-card .value { font-size: 1.125rem; font-weight: 700; }

.table-header-gradient { background: linear-gradient(90deg, #7c3aed, #2563eb); color: #fff; }
.table-hover-row tbody tr:hover { background-color: #f8fafc; }

/* Print helpers */
@media print {
    .no-print { display: none !important; }
}

/* Small page-specific helpers moved here */
.account-header { font-weight: bold; background-color: #f0f0f0; }
.text-right { text-align: right; }

/* Index expiration page styles moved from index_habis.php */
.index-habis-body { font-family: 'Poppins', sans-serif; background-color: #f4f7f6; color: #333; margin: 0; padding: 0; display:flex; justify-content:center; align-items:center; min-height:100vh; text-align:center; overflow-x:hidden; }
.index-habis-card { background-color:#fff; padding:40px 50px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.1); max-width:500px; width:90%; animation: fadeInScale 0.8s ease-out forwards; opacity:0; transform:scale(0.95); }
@keyframes fadeInScale { to { opacity:1; transform:scale(1); } }
.icon-container { margin-bottom:25px; animation: iconPop 0.5s 0.5s ease-out backwards; }
.icon-container svg { width:80px; height:80px; fill:#e74c3c; }
@keyframes iconPop { 0% { transform: scale(0); opacity:0; } 70% { transform:scale(1.1); opacity:1; } 100% { transform:scale(1); opacity:1; } }
.index-habis-title { color:#2c3e50; font-size:28px; font-weight:600; margin-bottom:15px; }
.index-habis-desc { font-size:16px; line-height:1.7; color:#555; margin-bottom:30px; }
.cta-button { display:inline-block; background: linear-gradient(90deg, #3498db, #2980b9); color:#fff; padding:14px 28px; text-decoration:none; border-radius:8px; font-weight:500; font-size:17px; transition:transform 0.3s ease, box-shadow 0.3s ease; box-shadow:0 4px 15px rgba(52,152,219,0.3); }
.cta-button:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(52,152,219,0.4); }
.footer-note { margin-top:30px; font-size:13px; color:#7f8c8d; }
.footer-note a { color:#3498db; text-decoration:none; }
.footer-note a:hover { text-decoration:underline; }

/* Custom Transparent Scrollbar for Sidebar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}