/* BOSphotos Admin Dashboard – CSS */
:root {
    --bd-orange: #ff7100; --bd-orange-h: #e56500;
    --bd-dark: #2a2a2a; --bd-white: #fff;
    --bd-gray-100: #f4f5f7; --bd-gray-200: #e5e7eb;
    --bd-gray-600: #6b7280; --bd-sidebar-w: 220px;
    --bd-success: #16a34a; --bd-error: #dc2626;
    --bd-warn-bg: #fffbeb;
    --bd-radius: 8px; --bd-shadow: 0 1px 4px rgba(0,0,0,.1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       background: var(--bd-gray-100); color: var(--bd-dark); font-size: 14px; }

/* Layout */
.bd-layout { display: flex; min-height: 100vh; }
.bd-sidebar {
    width: var(--bd-sidebar-w); background: var(--bd-dark);
    display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
}
.bd-sidebar__logo { padding: 24px 20px 16px; font-size: 20px; font-weight: 700;
    color: var(--bd-white); letter-spacing: -.5px; }
.bd-sidebar__logo span { color: var(--bd-orange); }
.bd-nav { flex: 1; padding: 8px 0; }
.bd-nav__item { display: flex; align-items: center; gap: 10px; padding: 12px 20px;
    color: rgba(255,255,255,.7); text-decoration: none; transition: background .15s, color .15s; }
.bd-nav__item:hover { background: rgba(255,255,255,.08); color: var(--bd-white); }
.bd-nav__item--active { background: rgba(255,113,0,.2); color: var(--bd-orange); border-right: 3px solid var(--bd-orange); }
.bd-nav__icon { font-size: 16px; }
.bd-sidebar__footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bd-sidebar__user { color: rgba(255,255,255,.6); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-sidebar__logout { color: var(--bd-orange); font-size: 12px; text-decoration: none; white-space: nowrap; }
.bd-sidebar__logout:hover { text-decoration: underline; }

.bd-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bd-topbar { background: var(--bd-white); border-bottom: 1px solid var(--bd-gray-200);
    padding: 16px 28px; display: flex; align-items: center; }
.bd-topbar__title { font-size: 18px; font-weight: 600; }
.bd-content { padding: 24px 28px; flex: 1; }

/* Stats */
.bd-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.bd-stat { background: var(--bd-white); border-radius: var(--bd-radius);
    box-shadow: var(--bd-shadow); padding: 20px; text-align: center; }
.bd-stat__value { display: block; font-size: 28px; font-weight: 700; color: var(--bd-orange); }
.bd-stat__label { display: block; font-size: 12px; color: var(--bd-gray-600); margin-top: 4px; }

/* Card */
.bd-card { background: var(--bd-white); border-radius: var(--bd-radius); box-shadow: var(--bd-shadow); padding: 20px; margin-bottom: 20px; }
.bd-card__title { font-size: 15px; font-weight: 600; margin-bottom: 16px;
    padding-bottom: 12px; border-bottom: 2px solid #fff3e9; }

/* Table */
.bd-table { width: 100%; border-collapse: collapse; }
.bd-table th { background: var(--bd-gray-100); text-align: left; padding: 10px 12px;
    font-size: 12px; font-weight: 600; color: var(--bd-gray-600); text-transform: uppercase; letter-spacing: .5px; }
.bd-table td { padding: 12px 12px; border-bottom: 1px solid var(--bd-gray-100); vertical-align: middle; }
.bd-table tr:last-child td { border-bottom: none; }
.bd-table tr:hover td { background: #fffaf7; }
.bd-td--small { font-size: 12px; color: var(--bd-gray-600); }
.bd-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bd-empty { text-align: center; color: var(--bd-gray-600); padding: 32px 0; }

/* Mini quota bar */
.bd-mini-quota { display: flex; flex-direction: column; gap: 4px; min-width: 100px; }
.bd-mini-quota span { font-size: 12px; }
.bd-mini-quota__track { height: 6px; background: var(--bd-gray-200); border-radius: 99px; overflow: hidden; }
.bd-mini-quota__fill { height: 100%; background: var(--bd-orange); border-radius: 99px; }
.bd-mini-quota__fill--warn { background: var(--bd-error); }

/* Status badges */
.bd-status { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.bd-status--active    { background: #dcfce7; color: var(--bd-success); }
.bd-status--suspended { background: #fee2e2; color: var(--bd-error); }
.bd-status--trial     { background: #fff3e9; color: var(--bd-orange); }
.bd-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px;
    background: var(--bd-gray-100); color: var(--bd-gray-600); }

/* Buttons */
.bd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
    border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer;
    border: none; transition: background .15s; text-decoration: none; white-space: nowrap; }
.bd-btn:disabled { opacity: .5; cursor: not-allowed; }
.bd-btn--primary  { background: var(--bd-orange); color: #fff; }
.bd-btn--primary:hover:not(:disabled) { background: var(--bd-orange-h); color: #fff; }
.bd-btn--secondary{ background: var(--bd-gray-100); color: var(--bd-dark); border: 1px solid var(--bd-gray-200); }
.bd-btn--ghost    { background: transparent; color: var(--bd-gray-600); border: 1px solid var(--bd-gray-200); }
.bd-btn--ghost:hover:not(:disabled) { background: var(--bd-gray-100); }
.bd-btn--full     { width: 100%; justify-content: center; }
.bd-btn--xs       { padding: 4px 10px; font-size: 12px; }

/* Page actions */
.bd-page-actions { display: flex; justify-content: flex-end; margin-bottom: 16px; }

/* Alerts */
.bd-alert { padding: 12px 16px; border-radius: 6px; font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.bd-alert--error   { background: #fee2e2; color: var(--bd-error); }
.bd-alert--success { background: #dcfce7; color: var(--bd-success); }
.bd-alert--warning { background: var(--bd-warn-bg); color: #92400e; border: 1px solid #fde68a; }

/* Dialog */
.bd-dialog { border: none; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.2);
    padding: 0; max-width: 560px; width: calc(100vw - 32px); }
.bd-dialog::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.bd-dialog__inner { padding: 28px; }
.bd-dialog__title { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.bd-dialog__actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* Forms */
.bd-form-group { margin-bottom: 14px; }
.bd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bd-form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--bd-gray-600);
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.bd-form-group input[type="text"],
.bd-form-group input[type="email"],
.bd-form-group input[type="number"],
.bd-form-group input[type="password"],
.bd-form-group textarea {
    width: 100%; padding: 9px 12px; border: 2px solid var(--bd-gray-200);
    border-radius: 6px; font-size: 14px; color: var(--bd-dark);
    background: var(--bd-gray-100); transition: border-color .15s; }
.bd-form-group input:focus, .bd-form-group textarea:focus {
    outline: none; border-color: var(--bd-orange); background: var(--bd-white); }
.bd-checkbox-group { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.bd-checkbox-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }

/* Key display */
.bd-key-display {
    background: var(--bd-dark); color: var(--bd-orange); font-family: monospace;
    font-size: 18px; letter-spacing: 2px; padding: 20px; border-radius: 8px;
    text-align: center; word-break: break-all; margin: 16px 0; }

/* Login page */
.bd-login-page { background: var(--bd-dark); display: flex; align-items: center;
    justify-content: center; min-height: 100vh; }
.bd-login-card { background: var(--bd-white); border-radius: 12px; padding: 40px; width: 100%; max-width: 380px;
    box-shadow: 0 16px 48px rgba(0,0,0,.3); }
.bd-login-logo { font-size: 28px; font-weight: 700; color: var(--bd-dark); text-align: center; margin-bottom: 4px; }
.bd-login-logo span { color: var(--bd-orange); }
.bd-login-subtitle { text-align: center; color: var(--bd-gray-600); margin-bottom: 28px; font-size: 13px; }
.bd-login-form .bd-form-group { margin-bottom: 16px; }
.bd-login-form button { margin-top: 8px; }