/* ============================================================================
   The Birthwright Family — Admin Stylesheet
   Notion/Linear-style premium admin shell, extending the approved admin
   mockup's dark green sidebar + antique gold accent language.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');

*{box-sizing:border-box}
body{margin:0;font-family:'DM Sans',sans-serif;background:#f3f5f3;color:#23302b}
a{color:inherit;text-decoration:none}
.admin-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}

/* Sidebar */
.sidebar{background:#0e372c;color:#fff;padding:26px 18px;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .logo{font-weight:800;font-size:1.1rem;padding:0 10px 26px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:10px}
.sidebar .logo img{width:34px;height:auto;flex:none}
.menu{margin-top:20px;display:flex;flex-direction:column;gap:2px}
.menu a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;color:#c9d9d2;font-size:.93rem}
.menu a i{width:18px;text-align:center}
.menu a.active,.menu a:hover{background:#c89b43;color:#17362c}
.menu .divider{height:1px;background:rgba(255,255,255,.1);margin:14px 4px}

/* Main area */
.main{padding:28px 32px 60px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;gap:14px}
.topbar h1{margin:0;font-family:'Montserrat',sans-serif;font-weight:800;color:#123d31;font-size:1.8rem}
.topbar small{color:#7c8781}
.user{display:flex;align-items:center;gap:10px}
.user img{width:42px;height:42px;border-radius:50%;object-fit:cover}

/* Cards / panels */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.metric,.panel{background:#fff;border-radius:16px;padding:22px;box-shadow:0 8px 26px rgba(22,50,39,.06)}
.metric small{color:#7c8781;text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;font-weight:700}
.metric strong{display:block;font-size:2rem;color:#164536;margin-top:6px;font-family:'Montserrat',sans-serif;font-weight:800}
.metric span{font-size:.82rem;color:#8a938c}
.content-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:20px;margin-top:20px}
.panel h3{margin-top:0;font-family:'Montserrat',sans-serif;font-weight:700;color:#17362c}

/* Tables */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;padding:13px;border-bottom:1px solid #edf0ed;font-size:.9rem;white-space:nowrap}
.table th{color:#7c8781;font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em}
.table tr:hover td{background:#fafbf9}
.table td.wrap{white-space:normal}
.member-cell{display:flex;align-items:center;gap:10px}
.member-cell img{width:36px;height:36px;border-radius:50%;object-fit:cover}

.status{padding:5px 10px;border-radius:999px;background:#e6f4ed;color:#25694f;font-size:.76rem;font-weight:700;display:inline-block}
.status-pending{background:#fdf1de;color:#a3671b}
.status-archived{background:#f1eeee;color:#7a7371}

/* Buttons */
.a-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;font-weight:700;border:1px solid transparent;cursor:pointer;font-family:inherit;font-size:.88rem;transition:.2s}
.a-btn-primary{background:#c89b43;color:#17362c}
.a-btn-primary:hover{background:#b6893a}
.a-btn-outline{background:#f8faf8;border-color:#dde5e0;color:#164536}
.a-btn-outline:hover{background:#eef2ee}
.a-btn-danger{background:#fbe6e4;color:#9b2c22}
.a-btn-danger:hover{background:#f6d2ce}
.a-btn-sm{padding:7px 12px;font-size:.78rem;border-radius:8px}
.a-btn:disabled{opacity:.75;cursor:wait}
.spinner{display:inline-block;width:13px;height:13px;border:2px solid rgba(0,0,0,.2);border-top-color:currentColor;border-radius:50%;animation:bw-spin .7s linear infinite;vertical-align:-2px;margin-right:4px}
@keyframes bw-spin{to{transform:rotate(360deg)}}

.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-actions a{padding:16px;border:1px solid #dde5e0;background:#f8faf8;border-radius:12px;font-weight:700;color:#164536;text-align:center;display:block}
.quick-actions a:hover{background:#eef2ee}
.upload-zone{border:2px dashed #b9c9c1;padding:32px;text-align:center;border-radius:16px;background:#f9fbfa}
.family-mini{padding:14px;border-left:3px solid #c89b43;margin:12px 0;background:#faf8f2;border-radius:0 10px 10px 0}
.family-mini strong{display:block}
.family-mini small{color:#7c8781}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-weight:700;font-size:.82rem;color:#3a453f;margin-bottom:6px}
.field .hint{font-size:.76rem;color:#8a938c;margin-top:4px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=date],.field input[type=password],.field input[type=search],.field select,.field textarea{
  width:100%;padding:11px 14px;border:1px solid #dde5e0;border-radius:10px;font-family:inherit;font-size:.92rem;background:#fff;color:#23302b;
}
.field textarea{resize:vertical;min-height:100px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#c89b43;box-shadow:0 0 0 3px rgba(200,155,67,.15)}
fieldset{border:1px solid #e7ece8;border-radius:14px;padding:20px;margin:0 0 22px}
fieldset legend{padding:0 10px;font-weight:700;color:#123d31;font-family:'Montserrat',sans-serif;font-size:1.1rem}
.checkbox-row{display:flex;align-items:center;gap:8px}
.checkbox-row input{width:auto}

/* Filters / search bar in admin */
.admin-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.admin-filters input,.admin-filters select{padding:10px 14px;border:1px solid #dde5e0;border-radius:10px;font-family:inherit;background:#fff}

/* Alerts */
.alert{padding:14px 18px;border-radius:12px;margin-bottom:18px;font-weight:600}
.alert-success{background:#e6f4ed;color:#25694f}
.alert-error{background:#fbe6e4;color:#9b2c22}

/* Pagination */
.pagination{display:flex;gap:6px;margin-top:20px;flex-wrap:wrap}
.pagination a,.pagination span{padding:8px 13px;border-radius:8px;border:1px solid #dde5e0;font-size:.85rem;background:#fff}
.pagination a:hover{background:#f8faf8}
.pagination .current{background:#123d31;color:#fff;border-color:#123d31}

/* Photo gallery — every tile is the same fixed size/shape (object-fit:cover
   crops to fill it uniformly) rather than a Pinterest-style masonry. */
.photo-masonry{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:20px}
.photo-masonry-item{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(22,50,39,.08);background:#fff;display:flex;flex-direction:column}
.photo-masonry-item img{width:100%;height:180px;object-fit:cover;display:block}
.photo-masonry-item .caption{padding:10px 12px;font-size:.82rem;color:#3a453f}
.photo-masonry-item .tag-count{position:absolute;top:8px;right:8px;background:rgba(14,55,44,.85);color:#fff;font-size:.72rem;padding:3px 8px;border-radius:999px}

/* Family Tree Builder */
.tb-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.tb-toolbar input[type=search]{padding:10px 14px;border:1px solid #dde5e0;border-radius:10px;min-width:240px;font-family:inherit}
.tb-zoom-group{display:flex;gap:4px;margin-left:auto}
.tb-canvas{position:relative;overflow:hidden;background:#eef1ee repeating-linear-gradient(45deg,#e7ebe7 0,#e7ebe7 1px,transparent 1px,transparent 22px);border-radius:18px;height:640px;cursor:grab;border:1px solid #dde5e0}
.tb-inner{position:absolute;top:40px;left:40px;transform-origin:0 0;transition:transform .08s linear}
.tb-row{display:flex;gap:34px;margin-bottom:70px;align-items:flex-start}
.tb-card{width:170px;background:#fff;border-radius:16px;padding:14px;text-align:center;box-shadow:0 8px 20px rgba(22,50,39,.1);border:2px solid transparent;cursor:grab;user-select:none}
.tb-card img{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0 auto 8px;display:block;border:3px solid #f3f5f3}
.tb-card strong{display:block;font-size:.85rem;color:#123d31}
.tb-card small{color:#8a938c;font-size:.72rem}
.tb-card.tb-dragging{opacity:.4}
.tb-card.tb-drop-target{border-color:#c89b43;box-shadow:0 0 0 4px rgba(200,155,67,.25)}
.tb-card.tb-highlight{border-color:#357f86;box-shadow:0 0 0 4px rgba(53,127,134,.25)}
.tb-connect-menu{position:fixed;z-index:999;background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.25);padding:12px;min-width:240px}
.tb-connect-title{font-size:.78rem;color:#7c8781;margin-bottom:8px;padding:0 4px}
.tb-connect-menu button{display:block;width:100%;text-align:left;padding:9px 10px;border:0;background:none;border-radius:8px;font-family:inherit;font-size:.85rem;cursor:pointer;color:#17362c}
.tb-connect-menu button:hover{background:#f3f5f3}
.tb-connect-menu button.tb-cancel{color:#9b2c22;margin-top:4px;border-top:1px solid #eee;padding-top:10px}

/* Login screen */
.login-shell{min-height:100vh;display:grid;place-items:center;background:linear-gradient(120deg,#0c382c,#1f604b);padding:20px}
.login-card{background:#fff;border-radius:22px;padding:44px;max-width:420px;width:100%;box-shadow:0 30px 70px rgba(0,0,0,.25)}
.login-logo{width:72px;height:auto;margin:0 auto 18px;display:block}
.login-card h1{text-align:center;font-family:'Montserrat',sans-serif;font-weight:800;color:#123d31;margin:0 0 6px;font-size:1.6rem}
.login-card p.sub{text-align:center;color:#7c8781;margin:0 0 26px;font-size:.9rem}

@media(max-width:950px){
  .admin-shell{grid-template-columns:82px 1fr}
  .sidebar .label,.sidebar .logo span{display:none}
  .metrics{grid-template-columns:1fr 1fr}
  .content-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .main{padding:16px}
  .metrics{grid-template-columns:1fr}
  .admin-shell{grid-template-columns:1fr}
  .sidebar{height:auto;position:relative}
}