/* ═══════════════════════════════════════════════════════════════════
   OWLMARK STUDIO — HOME DASHBOARD
   Companion stylesheet to owlmark-home.js.
   ═══════════════════════════════════════════════════════════════════ */

/* ── The finder ──────────────────────────────────────────────────── */
.om-finder{
  max-width:1180px;margin:0 auto 22px;padding:0 20px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}
.omf-search{
  position:relative;flex:1 1 260px;min-width:0;
  display:flex;align-items:center;
}
.omf-search svg{
  position:absolute;inset-inline-start:14px;
  width:17px;height:17px;color:rgba(250,247,239,.5);pointer-events:none;
}
.omf-search input{
  width:100%;min-height:46px;
  padding:11px 14px;padding-inline-start:40px;
  border-radius:13px;
  border:1px solid rgba(250,247,239,.18);
  background:rgba(10,16,32,.42);
  color:var(--ok-ivory,#FAF7EF);
  font-family:'Manrope',system-ui,sans-serif;font-size:.9rem;
}
.omf-search input::placeholder{color:rgba(250,247,239,.44)}
.omf-search input:focus{outline:2px solid #C99A3D;outline-offset:1px;border-color:#C99A3D}
body.lang-ar .omf-search input{font-family:'Cairo',system-ui,sans-serif}

.omf-tabs{display:flex;gap:6px;flex:0 0 auto}
.omf-tab{
  min-height:46px;padding:11px 16px;
  border-radius:13px;cursor:pointer;
  border:1px solid rgba(250,247,239,.18);
  background:rgba(10,16,32,.42);
  color:rgba(250,247,239,.72);
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.83rem;font-weight:700;white-space:nowrap;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.omf-tab:hover{color:var(--ok-ivory,#FAF7EF);background:rgba(250,247,239,.1)}
.omf-tab.current{
  background:linear-gradient(180deg,#D8B15C,#B8862F);
  border-color:#A87C2A;color:#1A1207;
}
.omf-tab:focus-visible{outline:2px solid #E8C978;outline-offset:2px}
body.lang-ar .omf-tab{font-family:'Cairo',system-ui,sans-serif}

.omf-none{
  flex:1 1 100%;margin:2px 0 0;padding:16px 18px;
  border-radius:14px;
  background:rgba(10,16,32,.34);
  border:1px dashed rgba(250,247,239,.22);
  color:rgba(250,247,239,.8);
  font-family:'Manrope',system-ui,sans-serif;font-size:.88rem;text-align:center;
}
.omf-none[hidden]{display:none !important}
body.lang-ar .omf-none{font-family:'Cairo',system-ui,sans-serif}

/* A hidden card must leave the grid entirely, not merely go invisible. */
.sh-tools .sh-card[hidden]{display:none !important}

/* ── Favourite star ──────────────────────────────────────────────── */
.sh-card{position:relative}
.omf-star{
  position:absolute;top:12px;inset-inline-end:12px;z-index:4;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;
  border:1px solid rgba(250,247,239,.26);
  background:rgba(10,16,32,.5);
  backdrop-filter:blur(4px);
  color:rgba(250,247,239,.72);
  transition:color .16s ease,background .16s ease,transform .12s ease;
}
.omf-star svg{width:21px;height:21px;fill:none}
.omf-star:hover{color:#E8C978;background:rgba(10,16,32,.66)}
.omf-star:active{transform:scale(.94)}
.omf-star.on{color:#E8C978}
.omf-star.on svg{fill:#E8C978}
.omf-star:focus-visible{outline:2px solid #E8C978;outline-offset:2px}

/* ── Project actions on a Recent card ────────────────────────────── */
.sh-recent-card{position:relative}
.omf-rowops{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(16,26,45,.1);
  width:100%;
}
.omf-rowops button{
  min-height:38px;padding:8px 12px;
  border-radius:10px;cursor:pointer;
  border:1px solid rgba(16,26,45,.14);
  background:rgba(16,26,45,.04);
  color:#3A4257;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.78rem;font-weight:700;
}
.omf-rowops button:hover{background:rgba(16,26,45,.09)}
.omf-rowops button.danger{color:#9E3B2C;border-color:rgba(158,59,44,.28)}
.omf-rowops button.danger:hover{background:rgba(158,59,44,.1)}
.omf-rowops button:focus-visible{outline:2px solid #B8862F;outline-offset:2px}
body.lang-ar .omf-rowops button{font-family:'Cairo',system-ui,sans-serif}

@media (pointer: coarse){
  .omf-rowops button{min-height:44px}
}

/* ── Phone ───────────────────────────────────────────────────────────
   The landing page was an unbroken column of large illustrated cards.
   The finder becomes a compact navigator pinned under the header, so a
   teacher can reach any studio without scrolling through all nine. */
@media (max-width: 720px){
  .om-finder{
    position:sticky;top:0;z-index:60;
    margin-bottom:16px;padding:10px 14px;
    background:linear-gradient(180deg,#101A2D,rgba(16,26,45,.96));
    border-bottom:1px solid rgba(201,154,61,.28);
    gap:8px;
  }
  .omf-search{flex:1 1 100%}
  .omf-search input{min-height:44px}
  .omf-tabs{flex:1 1 100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .omf-tab{padding:10px 8px;font-size:.78rem;text-align:center}
  .omf-rowops{gap:5px}
  .omf-rowops button{flex:1 1 0;text-align:center;justify-content:center}
}

@media (prefers-reduced-motion: reduce){
  .omf-tab,.omf-star{transition:none}
}

@media print{
  .om-finder,.omf-star,.omf-rowops{display:none !important}
}