/* ========================
   Base
======================== */
html,
body{
    height:100%;
    margin:0;
    font-family:"Inter", system-ui, sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    scroll-behavior:smooth;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================
   ROOT
========================= */

:root{

    --sidebar-width:280px;
    --sidebar-collapsed:78px;

    --sidebar-bg:#0f172a;
    --sidebar-bg-light:#1e293b;

    --primary:#14b8a6;
    --primary-hover:#0f9f91;

    --bg:#f5f7fb;

    --card-bg:#ffffff;

    --text-light:#cbd5e1;

    --text:#111827;
    --sidebar-text:#ffffff;

    --muted:#6b7280;

    --border:#e5e7eb;
    --sidebar-border:rgba(255,255,255,0.06);

    --error-bg:#ffe5e5;
    --error-text:#b30000;

    --success-bg:#e6fffa;
    --success-text:#006d5b;
}

/* =========================
   SIDEBAR
========================= */

.sidebar{
    position:fixed;

    top:0;
    left:0;

    width:var(--sidebar-width);
    height:100vh;

    background:
        linear-gradient(
            180deg,
            var(--sidebar-bg-light) 0%,
            var(--sidebar-bg) 100%
        );

    color:var(--sidebar-text);

    display:flex;
    flex-direction:column;

    transition:all .3s ease;

    z-index:1000;

    overflow:hidden;

    border-right:1px solid var(--sidebar-border);

    box-shadow:
        0 0 25px rgba(0,0,0,0.18);
}

/* =========================
   COLLAPSED
========================= */

.sidebar.collapsed{
    width:var(--sidebar-collapsed);
}

/* =========================
   HEADER
========================= */

.sidebar-header{
    height:72px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 18px;

    border-bottom:1px solid var(--sidebar-border);

    flex-shrink:0;
}

.logo-text{
    font-size:20px;
    font-weight:700;

    white-space:nowrap;

    letter-spacing:.5px;
}

.sidebar.collapsed .logo-text{
    display:none;
}

/* =========================
   TOGGLE BUTTON
========================= */

#toggleSidebar{
    width:42px;
    height:42px;

    border:none;
    outline:none;

    border-radius:12px;

    background:rgba(255,255,255,0.08);

    color:#fff;

    cursor:pointer;

    transition:.25s ease;
}

#toggleSidebar:hover{
    background:var(--primary);

    transform:translateY(-1px);
}

/* =========================
   MENU AREA
========================= */

.sidebar-menu{
    flex:1;

    overflow-y:auto;
    overflow-x:hidden;

    padding:18px 12px 120px;
}

/* SCROLLBAR */

.sidebar-menu::-webkit-scrollbar{
    width:4px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.1);
    border-radius:10px;
}

/* =========================
   LIST
========================= */

.sidebar ul{
    list-style:none;
}

/* =========================
   MENU ITEMS
========================= */

.sidebar ul li{
    margin-bottom:6px;
}

.sidebar ul li a,
.dropdown-btn{
    width:100%;

    display:flex;
    align-items:center;

    gap:14px;

    padding:14px 16px;

    border:none;
    outline:none;

    border-radius:14px;

    text-decoration:none;

    background:none;

    color:var(--text-light);

    font-size:15px;
    font-weight:500;

    transition:all .25s ease;

    cursor:pointer;
}

/* =========================
   ICON
========================= */

.sidebar ul li a i,
.dropdown-btn i{
    width:20px;

    text-align:center;

    font-size:16px;
}

/* =========================
   MENU TEXT
========================= */

.menu-text{
    flex:1;
    text-align: left;
    white-space:nowrap;
}

/* =========================
   HOVER
========================= */

.sidebar ul li a:hover,
.dropdown-btn:hover{
    background:rgba(20,184,166,0.18);

    color:#fff;

    transform:translateX(4px);
}

/* =========================
   ACTIVE
========================= */

.sidebar ul li a.active{
    background:var(--primary);

    color:#fff;

    box-shadow:
        0 10px 20px rgba(20,184,166,.22);
}

/* =========================
   CARET
========================= */

.fa-caret-down{
    transition:transform .3s ease;
}

.active-dropdown .fa-caret-down{
    transform:rotate(90deg);
}

/* =========================
   SUBMENU
========================= */

.submenu{
    max-height:0;

    overflow:hidden;

    transition:max-height .3s ease;

    margin-left:12px;
}

.submenu li{
    margin-bottom:4px;
}

.submenu a{
    padding:12px 16px;

    font-size:14px;

    border-radius:12px;

    background:rgba(255,255,255,0.03);

    color:#cbd5e1;
}

.submenu a:hover{
    background:rgba(255,255,255,0.08);
}

/* =========================
   COLLAPSED MODE
========================= */

.sidebar.collapsed .menu-text,
.sidebar.collapsed .fa-caret-down{
    display:none;
}

.sidebar.collapsed .sidebar-header{
    justify-content:center;
}

.sidebar.collapsed ul li a,
.sidebar.collapsed .dropdown-btn{
    justify-content:center;

    padding:15px;
}

/* =========================
   LOGOUT
========================= */

.logout{
    color:#f87171 !important;
}

.logout:hover{
    background:rgba(248,113,113,0.15) !important;
}

/* =========================
   FOOTER
========================= */

.sidebar-footer{
    position:absolute;

    bottom:0;
    left:0;

    width:100%;

    padding:18px;

    background:
        linear-gradient(
            to top,
            rgba(15,23,42,1),
            rgba(15,23,42,.92)
        );
}

.sidebar-footer img{
    width:100%;
    height:100px;

    object-fit:cover;

    border-radius:16px;

    border:1px solid rgba(255,255,255,0.08);
}

.sidebar.collapsed .sidebar-footer{
    display:none;
}

/* =========================
   CONTENT
========================= */

.content{
    margin-left:var(--sidebar-width);

    width:calc(100% - var(--sidebar-width));

    min-width:0;

    min-height:100vh;

    height:100vh;

    display:flex;
    flex-direction:column;

    overflow-x:hidden;
    overflow-y:auto;

    transition:.3s ease;
}

.content.collapsed{
    margin-left:var(--sidebar-collapsed);

    width:calc(100% - var(--sidebar-collapsed));
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .sidebar{
        left:-280px;
    }

    .sidebar.collapsed{
        left:0;

        width:280px;
    }

    .sidebar.collapsed .menu-text,
    .sidebar.collapsed .fa-caret-down,
    .sidebar.collapsed .logo-text{
        display:block;
    }

    .sidebar.collapsed ul li a,
    .sidebar.collapsed .dropdown-btn{
        justify-content:flex-start;
    }

    .sidebar.collapsed .sidebar-footer{
        display:block;
    }

    .content,
    .content.collapsed{
        margin-left:0;

        width:100%;
    }
}

.content-center {
    min-height: calc(100vh - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}


canvas{
    max-width:100% !important;
    height:320px !important;
}
.page-body{
    flex:1;
    padding:20px;
    overflow-y:auto;
}

/* ========================
   Cards
======================== */
.card {
    background: var(--card-bg);
    padding: 32px;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    width: 100%;
    max-width: 720px;
}

.card-sm { max-width: 420px; }
.card-md { max-width: 560px; }
.card-lg { max-width: 900px; }

.card-header {
    padding: 28px 32px;
    border-bottom: 1px solid var(--border);
}

.card-header h2 {
    margin: 0;
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 14px;
}

/* ========================
   Alerts
======================== */
.alert {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.alert-error { background: var(--error-bg); color: var(--error-text); }
.alert-success { background: var(--success-bg); color: var(--success-text); }

/* ========================
   Forms
======================== */
.form-group {
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
}

label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--muted);
}

input,
textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    background: #fff;
}

textarea { resize: vertical; }

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.15);
}

/* ========================
   Form Layouts
======================== */
.grid-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.grid-form .full { grid-column: 1 / -1; }

.aligned-form {
    display: grid;
    grid-template-columns: 180px 1fr;
    column-gap: 24px;
    row-gap: 20px;
    align-items: center;
}
.aligned-form label { text-align: right; margin: 0; font-weight: 500; }
.aligned-form .full,
.aligned-form .actions { grid-column: 2 / -1; }

.vertical-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 32px;
    max-width: 640px;
}
.vertical-form .form-group.full { grid-column: 1 / -1; }

/* ========================
   Buttons
======================== */
.btn-primary,
.btn-save {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 14px 26px;
    font-size: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.btn-primary:hover,
.btn-save:hover { background: var(--primary-hover); }

.btn-primary:active,
.btn-save:active { transform: scale(0.98); }

/* ========================
   Footer
======================== */
.footer{
    height:25px;
    min-height:25px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-top:1px solid var(--border);
    background:#fff;

    font-size:12px;
    color:var(--muted);

    flex-shrink:0;
}

/* message pop up */

#msg-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg-box {
  width: 280px;
  background: white;
  border-left: 5px solid #2196F3;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  transition: 0.3s;
}

.msg-box.success { border-color: green; }
.msg-box.error { border-color: red; }
.msg-box.warning { border-color: orange; }
.msg-box.info { border-color: #2196F3; }
.msg-box.critical { border-color: purple; }

.btn-copy{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:6px;
    text-decoration:none;
    font-weight:600;
    background:#f1f5f9;
    color:#334155;
    border:1px solid #cbd5e1;
    transition:0.2s;
}

.btn-copy:hover{
    background:#e2e8f0;
    transform:translateY(-1px);
}