/* ============================================================================
   VastuGuruji Books — admin UI styles (Phase 1)
============================================================================ */
:root{
  --bg:#f4f5f7; --card:#fff; --ink:#0f172a; --mute:#64748b; --line:#e2e8f0;
  --pri:#1e6091; --pri-d:#164e75; --pri-l:#e6f0f7;
  --ok:#16a34a; --warn:#d97706; --bad:#c0392b;
  --r:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.bk-body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  min-height:100vh; display:flex; flex-direction:column;
}

/* Top bar */
.bk-top{
  display:flex; align-items:center; gap:14px;
  background:#0f172a; color:#fff; padding:10px 14px;
  position:sticky; top:0; z-index:50;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  min-width:0;
}
.bk-brand{color:#fff;text-decoration:none;font-weight:800;font-size:16px;letter-spacing:.2px;white-space:nowrap;flex-shrink:0}
.bk-nav{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.bk-nav::-webkit-scrollbar{height:4px}
.bk-nav::-webkit-scrollbar-thumb{background:#475569;border-radius:2px}
.bk-nav a{color:#cbd5e1;text-decoration:none;padding:6px 10px;border-radius:6px;font-size:13px;font-weight:600;white-space:nowrap;flex-shrink:0}
.bk-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.bk-side{display:flex;align-items:center;gap:10px;flex-shrink:0}
.bk-co-switch select{
  background:#1e293b;color:#fff;border:1px solid #334155;border-radius:6px;
  padding:6px 10px;font-size:13px;font-weight:600;cursor:pointer;max-width:200px
}
.bk-user{color:#94a3b8;font-size:12px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.bk-settings{color:#cbd5e1;text-decoration:none;font-size:18px;padding:4px 8px;border-radius:6px}
.bk-settings:hover{background:rgba(255,255,255,.08)}

/* Flash */
.bk-flash{padding:12px 18px;font-size:14px;font-weight:600;text-align:center}
.bk-flash-ok{background:#dcfce7;color:#166534;border-bottom:2px solid #16a34a}
.bk-flash-bad{background:#fee2e2;color:#991b1b;border-bottom:2px solid #c0392b}
.bk-flash-info{background:#e0f2fe;color:#075985;border-bottom:2px solid #0284c7}
.bk-flash-warn{background:#fef3c7;color:#92400e;border-bottom:2px solid #d97706}

/* Main */
.bk-main{flex:1;max-width:1280px;margin:0 auto;width:100%;padding:24px 18px}
.bk-foot{padding:14px 18px;text-align:center;color:var(--mute);font-size:12px;border-top:1px solid var(--line)}

/* Card */
.bk-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; margin-bottom:18px; box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.bk-card h2{margin:0 0 14px;font-size:18px;font-weight:700;color:var(--ink)}
.bk-card h3{margin:14px 0 8px;font-size:15px;font-weight:700;color:var(--ink)}

/* Grid + tiles */
.bk-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bk-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.bk-grid-3,.bk-grid-2{grid-template-columns:1fr}}

.bk-tile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; text-decoration:none; color:var(--ink); display:block; transition:.15s
}
.bk-tile:hover{border-color:var(--pri); box-shadow:0 4px 12px rgba(30,96,145,.12); transform:translateY(-1px)}
.bk-tile-label{font-size:12px;color:var(--mute);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.bk-tile-value{font-size:24px;font-weight:800;margin-top:6px;color:var(--ink);font-variant-numeric:tabular-nums}
.bk-tile-foot{font-size:12px;color:var(--mute);margin-top:6px}
.bk-tile.bk-tile-ok .bk-tile-value{color:var(--ok)}
.bk-tile.bk-tile-bad .bk-tile-value{color:var(--bad)}

/* Forms */
.bk-form-row{display:grid;grid-template-columns:160px 1fr;gap:10px;align-items:center;margin-bottom:12px}
.bk-form-row > label{font-size:13px;font-weight:600;color:var(--ink)}
.bk-form-row > .bk-help{font-size:12px;color:var(--mute);grid-column:2}
.bk-input, .bk-select, .bk-textarea{
  width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:6px;
  font-size:14px; font-family:inherit; background:#fff
}
.bk-input:focus, .bk-select:focus, .bk-textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(30,96,145,.12)}
.bk-textarea{min-height:64px;resize:vertical}
.bk-input[readonly]{background:#f1f5f9;color:var(--mute)}

@media(max-width:760px){.bk-form-row{grid-template-columns:1fr}.bk-form-row > .bk-help{grid-column:1}}

/* Buttons */
.bk-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:6px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-weight:600;font-size:14px;
  cursor:pointer;text-decoration:none;transition:.15s
}
.bk-btn:hover{background:#f8fafc;border-color:#cbd5e1}
.bk-btn-primary{background:var(--pri);border-color:var(--pri);color:#fff}
.bk-btn-primary:hover{background:var(--pri-d);border-color:var(--pri-d);color:#fff}
.bk-btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
.bk-btn-sm{padding:5px 10px;font-size:12px}

/* Tables */
.bk-table{width:100%;border-collapse:collapse;font-size:14px}
.bk-table th,.bk-table td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--line)}
.bk-table th{background:#f8fafc;font-weight:700;color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.bk-table tbody tr:hover{background:#fafbfc}
.bk-table .num{text-align:right;font-variant-numeric:tabular-nums;font-family:Menlo,Consolas,monospace}
.bk-table .right{text-align:right}

/* Empty state */
.bk-empty{padding:36px 18px;text-align:center;color:var(--mute)}
.bk-empty h3{color:var(--ink);margin:0 0 8px}

/* Status pill */
.bk-pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.bk-pill-ok{background:#dcfce7;color:#166534}
.bk-pill-warn{background:#fef3c7;color:#92400e}
.bk-pill-bad{background:#fee2e2;color:#991b1b}
.bk-pill-info{background:#e0f2fe;color:#075985}

/* Phase banner */
.bk-phase{
  background:linear-gradient(135deg,#1e6091,#164e75);color:#fff;
  padding:20px 24px;border-radius:var(--r);margin-bottom:18px
}
.bk-phase h1{margin:0 0 4px;font-size:22px}
.bk-phase p{margin:0;opacity:.9;font-size:14px}

/* Sections */
.bk-section-title{font-size:13px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.5px;margin:24px 0 10px}

/* Mobile nav fix */
@media(max-width:760px){
  .bk-top{flex-wrap:wrap;gap:8px}
  .bk-nav{order:3;flex-basis:100%;overflow-x:auto;padding-bottom:4px}
  .bk-nav a{font-size:13px;padding:5px 9px;white-space:nowrap}
  .bk-brand{font-size:15px}
}

/* Subtle fade at right edge of nav to hint overflow */
.bk-nav{position:relative}
@media (min-width: 900px) {
  .bk-top{position:sticky}
}

/* Hide user email below 1200px to keep nav from overflowing */
@media (max-width: 1200px) {
  .bk-user { display: none; }
}
/* Make the company switcher dropdown narrower on cramped screens */
@media (max-width: 1100px) {
  .bk-co-switch select { max-width: 140px; font-size: 12px; }
}

/* === Global search + Right-side drawer (added 2026-06-17) === */

/* Search input in top bar */
.bk-search{position:relative;margin-left:auto;margin-right:14px;flex-shrink:0;width:280px}
.bk-search input{width:100%;height:36px;padding:0 38px 0 38px;border:1.5px solid #e7e5e4;border-radius:18px;font:600 13.5px Inter,sans-serif;background:#fff8ee;color:#0f172a;outline:none;transition:border-color .15s,box-shadow .15s,width .2s}
.bk-search input:focus{border-color:#c08329;background:#fff;box-shadow:0 0 0 3px rgba(192,131,41,.15);width:360px}
.bk-search .bks-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;color:#a8a29e;pointer-events:none}
.bk-search .bks-kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:700 10.5px Inter,sans-serif;color:#a8a29e;background:#f5f5f4;border:1px solid #e7e5e4;border-radius:4px;padding:2px 6px;pointer-events:none}
.bk-search input:focus ~ .bks-kbd{display:none}

/* Results dropdown */
.bks-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:460px;max-width:520px;background:#fff;border:1px solid #e7e5e4;border-radius:14px;box-shadow:0 16px 40px rgba(15,23,42,.15);max-height:520px;overflow-y:auto;z-index:9000;display:none}
.bks-dropdown.is-open{display:block}
.bks-meta{padding:8px 14px;color:#a8a29e;font-size:12px;border-bottom:1px solid #f1eadd;letter-spacing:.04em}
.bks-group{padding:8px 0}
.bks-group:not(:last-child){border-bottom:1px solid #f1eadd}
.bks-group-label{font:800 11px Inter,sans-serif;color:#a16207;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px 4px}
.bks-item{display:flex;align-items:center;gap:12px;padding:9px 16px;cursor:pointer;text-decoration:none;color:#0f172a;font-size:14px;border-left:3px solid transparent}
.bks-item:hover, .bks-item.is-active{background:#fff8ee;border-left-color:#c08329}
.bks-item-ico{font-size:20px;flex-shrink:0;width:32px;text-align:center}
.bks-item-body{flex:1;min-width:0}
.bks-item-title{font-weight:700;color:#0f172a;line-height:1.25;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bks-item-sub{font-size:12.5px;color:#78716c;margin-top:2px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bks-empty{padding:30px 16px;text-align:center;color:#a8a29e;font-size:13.5px}

/* Right-side drawer */
.bkd-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);z-index:9100;opacity:0;pointer-events:none;transition:opacity .2s}
.bkd-overlay.is-open{opacity:1;pointer-events:auto}
.bkd-panel{position:fixed;top:0;right:0;width:min(540px,100%);height:100vh;background:#fff;box-shadow:-20px 0 60px rgba(15,23,42,.18);z-index:9200;transform:translateX(100%);transition:transform .25s cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column;overflow-y:auto}
.bkd-panel.is-open{transform:translateX(0)}
.bkd-close{position:sticky;top:0;display:flex;align-items:center;justify-content:flex-end;padding:14px 18px;background:#fff;z-index:1;border-bottom:1px solid #f1eadd}
.bkd-close button{background:#f5f5f4;color:#0f172a;border:1px solid #e7e5e4;border-radius:8px;width:36px;height:36px;cursor:pointer;font-size:16px;line-height:1}
.bkd-close button:hover{background:#fff8ee;border-color:#c08329}
.bkd-body{padding:14px 24px 28px;flex:1}

/* Drawer content components */
.bkd-head{display:flex;gap:14px;align-items:flex-start;padding:0 0 18px;border-bottom:1px solid #f1eadd;margin-bottom:18px}
.bkd-head-icon{font-size:36px;line-height:1;flex-shrink:0}
.bkd-head-body{flex:1;min-width:0}
.bkd-head-eyebrow{font:700 11.5px Inter,sans-serif;color:#a16207;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.bkd-head-title{font:700 22px Lora,Georgia,serif;color:#0f172a;margin:0 0 6px;line-height:1.2;word-break:break-word}
.bkd-head-sub{font-size:13.5px;color:#78716c}
.bkd-section{margin:18px 0}
.bkd-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
.bkd-section h3{margin:0;font:700 14px Inter,sans-serif;color:#0f172a;text-transform:uppercase;letter-spacing:.04em}
.bkd-tag{display:inline-block;font:700 11px Inter,sans-serif;padding:3px 9px;border-radius:99px;letter-spacing:.04em}
.bkd-tag-bad{background:#fecaca;color:#991b1b}
.bkd-tag-warn{background:#fef3c7;color:#854d0e}
.bkd-tag-ok{background:#bbf7d0;color:#166534}
.bkd-pill{display:inline-block;padding:2px 8px;border-radius:99px;background:#f5f5f4;color:#78716c;font:700 10.5px Inter,sans-serif;letter-spacing:.04em}
.bkd-stock-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.bkd-stock-tbl th, .bkd-stock-tbl td{padding:9px 10px;border-bottom:1px solid #f1eadd}
.bkd-stock-tbl thead th{font:700 11px Inter,sans-serif;color:#a16207;letter-spacing:.06em;text-transform:uppercase;background:#fff8ee}
.bkd-empty{padding:20px;text-align:center;color:#a8a29e;font-size:13px}
.bkd-actions{display:flex;flex-wrap:wrap;gap:8px;padding:18px 0;border-top:1px solid #f1eadd;margin-top:18px}
.bkd-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid #e7e5e4;color:#0f172a;font:700 13.5px Inter,sans-serif;padding:8px 14px;border-radius:8px;text-decoration:none;cursor:pointer;min-height:36px}
.bkd-btn:hover{border-color:#c08329;background:#fff8ee}
.bkd-btn-primary{background:#c08329;color:#fff;border-color:#c08329}
.bkd-btn-primary:hover{background:#a16207;border-color:#a16207}

@media (max-width:720px){
  .bk-search{width:100%;order:99;margin:8px 0}
  .bk-search input:focus{width:100%}
  .bks-dropdown{position:fixed;left:8px;right:8px;top:auto;min-width:0}
  .bkd-panel{width:100%}
}

</content>