/* Base styles shared across pages */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Icons&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Round&display=swap');

:root{
    --primary:#1a73e8;
    --warning:#fbbc04;
    --danger:#ea4335;
    --bg:#1D1D1D;
    --muted:#666;
    /* Theme tokens for dashboard template */
    --header-bg: #1D1D1D; /* WP-like light header */
    --sidebar-bg: #1D1D1D; /* WP dark sidebar */
    --sidebar-active: #0073aa; /* WP admin blue */
    --card-bg: #ffffff; /* card background */
    --surface-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.06);
}
.container{max-width:50rem;margin:2.5rem auto;padding:2rem;background:#fff;border-radius:0.75rem;box-shadow:0 0.25rem 1.5rem rgba(0,0,0,0.06);} 
h2{color:var(--primary);}
/* Buttons */
.btn-primary{background:var(--primary);border:none;color:#fff;padding:0.5rem 1rem;border-radius:0.375rem;cursor:pointer}
.btn-primary:hover{background:#1765c1}
.btn-warning{background:var(--warning);border:none;color:#202124;padding:0.5rem 1rem;border-radius:0.375rem}
.btn-danger{background:var(--danger);border:none;color:#fff;padding:0.5rem 1rem;border-radius:0.375rem}
a { color: var(--sidebar-active);}

body { font-family: 'Roboto', Arial, sans-serif; background: var(--bg); margin: 0; height: 100dvh; width: 100dvw; }
.no-scroll { overflow: hidden; }
.login-page .wrapper { height: 100dvh; overflow: hidden; }
.login-page .card-container { height: auto !important; overflow: visible !important; padding: 0 1.5rem; }
.page { display: flex; flex-direction: column; height: 100dvh; width: 100dvw; overflow: hidden; }
main { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.dashboard-wrapper { display: flex; flex: 1; width: 100%; overflow: hidden; }
.main-content { display: flex; flex: 1; overflow: hidden;}
.content-root { display:flex; flex-direction: column; width:100%; min-height: 0 !important; overflow: hidden; }
.wrapper 
{ 
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow children to scroll inside flex parent */
    overflow-y: auto;
    width: 100%; 
}
.page-header { padding: 0.5rem 1.5rem; z-index: 200; box-shadow: inset 0 -0.0625rem 0 #3B3B3B; background-color: var(--bg); position: sticky; top: -1px; z-index: 200; display: flex; justify-content: space-between; align-items: center; }
.page-title { font-size:1.25rem; font-weight:700; color:#fff; }

.card-container 
{ 
    background-color: var(--theme-background);
    padding: 0px 24px 24px 24px;
    overflow-y: auto;
    min-height: 0; /* enable inner scroll in flex context */
    flex: 1;
}

/* Tables */
.table-card { margin-top: 1rem; }
thead {position: sticky; top: -1px; z-index: 100; background: var(--bg); }

table 
{ 
    width:100%; 
    border-collapse:collapse; 
    margin:0; 
}

tr { border: 0.00625rem solid #3B3B3B !important; }

th { color:var(--bg); background-color:var(--sidebar-active); font-weight:500; font-size: 0.75rem; line-height: 1rem; height: 2.5625rem; padding: 0; vertical-align: middle; top: 4.0625rem; z-index: 1; background-clip: border-box; text-align: left; }

th:first-child { padding-left: 0.875rem; }

th:last-child { min-width: auto; width: 2.25rem; }

td { padding: 0 0.875rem 0 0; color:#fff; font-weight: 400; font-size: 0.875rem; line-height: 1.125rem; vertical-align: middle; height: 2.25rem; }

td:first-child { padding-left: 0.875rem; }

.icon-action-header {
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--bg);
}

.th-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 0.875rem;
}

.action-icons > .td-actions {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
}

.icon-action {
    cursor: pointer;
    font-size: 1rem;
    color: #c7c7c7;
    padding: 0;
}

/* Common small utilities */
.access-container{max-width:25rem;margin:5rem auto;padding:2rem;background:#2C2C2C;border-radius:0.5rem;box-shadow:0 0.125rem 0.5rem rgba(0,0,0,0.1);text-align:center;min-width: 400px; }
.access-title{color:var(--danger)}
.link-primary{color:var(--primary);text-decoration:underline}
.back-link{display:block;margin-top:2rem;color:var(--primary);text-decoration:underline;font-weight:500}
.message{margin-top:1rem;color:var(--danger)}
.muted{color:#888}

/* Forms */
input,select,textarea{width:100%;padding:0.5rem;margin-top:0.5rem;border-radius:0.25rem;border:0.0625rem solid #ccc;box-sizing:border-box}
label{display:block;margin-top:1rem}

/* Small helpers */
.form-inline{display:flex;gap:0.5rem}
.nav-links{text-align:center;margin-top:2rem}

/* Keep per-page CSS allowed to override these */

/* Google Material Icons helpers (filled and rounded) */
.material-icons-round, .material-icons {
    font-family: 'Material Icons Round', 'Material Icons', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1.25rem;  /* preferred icon size */
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
        font-feature-settings: 'liga';
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
}
.material-icons-round { font-family: 'Material Icons Round', 'Material Icons', sans-serif; }
.material-icons { font-family: 'Material Icons', 'Material Icons Round', sans-serif; }

/* Responsive helpers */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;background:transparent;padding:0.5rem 0}
.modal{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(204, 204, 204, 0.2);align-items:center;justify-content:center;z-index:1000}
.modal .modal-content{background:#fff;padding:1rem;max-width:45rem;width:94%;box-shadow:0 0.375rem 1.125rem rgba(0,0,0,.2);border-radius:0.5rem;position:relative}
.modal .modal-close{position:absolute;right:0.5rem;top:0.5rem;border:none;background:transparent;font-size:0.875rem;cursor:pointer;width: fit-content;}

/* Breakpoints: tablet and mobile */
@media (max-width: 56.25rem){
    .container{max-width:94%;margin:1.25rem auto;padding:1.25rem}
    .form-inline{flex-direction:column}
    th,td{padding:0.5rem}
    /* Remove padding for compact action cells on mobile */
    td.action-items{padding:0 !important}
    /* Reduce table row/header height on tablets/phones */
    th{ height: 2rem; line-height: 1rem; }
    td{ height: 1.75rem; line-height: 1.125rem; }
}
@media (max-width:37.5rem){
    .container{max-width:100%;margin:0.75rem;padding:0.875rem;border-radius:0.375rem}
    /* Make buttons span full width on small screens */
    .btn-primary, .btn-warning, .btn-danger, button, .add-btn{width:100%;display:block}
    /* Stack labels and inputs tighter */
    label{margin-top:0.625rem}
    input,select,textarea{padding:0.625rem}
    table{font-size:0.8125rem}
    /* Further compact rows on small phones */
    th{ height: 1.875rem; }
    td{ height: 1.625rem; }
    /* Make modal content fill near full height on mobile */
    .modal{align-items:flex-end}
    .modal .modal-content{border-bottom-left-radius:0;border-bottom-right-radius:0;max-height:92vh;overflow:auto}
}